在“道具”一词的道具验证中反应 eslint 错误

Question

我有以下代码：

import React from "react";
import "./App.css";
import myPic from "./pics/John_Smith.jpg";

function App() {
  return (
    <div className="App">
            <header className="App-header">
                <div className="App-Modal">
                    <p className="App-Modal-Text">5 Birthdays today</p>
                    {/* <BirthdayCard job="Developer"/> */}
                    <BirthdayCard />
                </div>
      </header>
    </div>
  );
}

const BirthdayCard = (props) => {
    console.log(props);
    return <article className="BArticle">
        <Image></Image>
        <Text></Text>
        <p>{props.job}</p>
    </article>

};

const Image = () => (
    <img src={myPic} alt="" />
 );

const Text = () => {
    return <article className="BText">
        <Name></Name>
        <Age></Age>
    </article>
}

const Name = () => (
    <h5>John Smith</h5>
)

const Age = () => (
    <p>30 years</p>
)

export default App;

我收到错误消息； props 验证 react/prop-types 中缺少“job”，但只有当我使用“props”这个词作为参数时才会发生这种情况。 如果我将其更改为其他任何内容，甚至是“道具”，错误就会消失。 有谁知道这是为什么以及如何修复它以便能够使用“道具”作为参数？

Answer 1

Prop 验证是一种对组件接收到的 props 进行类型检查的方法。

例如，在BirthdayCard的情况下，您可以执行以下操作：

import PropTypes from 'prop-types';

BirthdayCard.propTypes = {
  job: PropTypes.string
};

因此，每当您使用BirthdayCard并以字符串以外的类型传递道具作业时，您都会收到控制台错误警告您该类型应该是字符串。

// This throws a console error
<BirthdayCard job={1} />

// This does not throw any error
<BirthdayCard job="programmer" />

如果您不打算定义道具类型，则可能需要禁用此警告。

至于为什么它只在名称为道具时抛出警告。

边注。 您可以使用 object 解构来稍微清理您的组件定义。

const BirthdayCard = ({ job }) => {
    return <article className="BArticle">
        <Image></Image>
        <Text></Text>
        <p>{job}</p>
    </article>
};