在单词 "props" 的道具验证中缺少 React 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”这个词作为参数时才会发生这种情况。如果我将它更改为其他任何东西，甚至是“prop”，错误就会消失。有谁知道这是为什么以及如何修复它以便能够使用“props”作为参数？

Answer 1

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

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

import PropTypes from 'prop-types';

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

因此，每当您使用 BirthdayCard 并使用字符串以外的类型传递 prop 作业时，您将收到控制台错误，警告您类型应为字符串。

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

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

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

至于为什么它只在名称为 props 时抛出警告，我不知道。可能是因为习惯使用 props.

这个名字

旁注。您可以使用对象解构来稍微清理您的组件定义。

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

在单词 "props" 的道具验证中缺少 React eslint 错误

React eslint error missing in props validation on for the word "props"

javascript

reactjs

eslint

react-props