在“道具”一詞的道具驗證中反應 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>
};