道具验证中缺少反应/道具类型

Question

在进行研究时提供的解决方案基于 React class 而不是 React function，我只是 React 的新手。

我从父组件调用子组件并将值作为“数据”传递。 在子组件中，我正在使用道具检索值。

父组件.js

<ChildComponent data={1}/>

子组件.js

function ChildComponent(props) {
    const { data } = props.data;
    ...
}

以上给了我以下错误信息：

src\components\ChildComponent\ChildComponent.js 第 5:11 行：道具验证 react/prop-types 中缺少“data.data” 第 5:29 行：道具验证 react/prop-types 中缺少“data”

搜索关键字以了解有关每个错误的更多信息。

Answer 1

props正在收集您传递给ChildComponent的所有属性

你的数据应该是这样的

function ChildComponent(props) {
    const { data } = props; //object destructuring
    ...
}

或者像这样

function ChildComponent(props) {
    const data = props.data //access data directly and assign a new variable
    ...
}

Answer 2

@Denno 和@Nick Vu 是正确的，但在导出之前，您可能还需要向子组件添加其他内容。

ChildComponent.propTypes = {
  data: PropTypes.object
};

并添加导入

import PropTypes from "prop-types";

并改变这个

function ChildComponent(props) {
    const { data } = props.data;
    ...
}

到

function ChildComponent(props) {
    const data = props.data;
    ...
}

Answer 3

如果你想知道const { data } = props.data的含义，你应该学习一些关于 ES6（Destructuring Assignment）的知识

或对此进行简单的更改代码

function ChildComponent(props) {
    const data = props.data 
}