无状态功能组件 - React

Question

我是 React 的新手，我正在网上做一些教程。 现在我有这样的任务：如果下面代码中的组件是一个无状态功能组件，你会写什么表达式来访问组件内的 items 属性？

<IngredientList items={ingredient.items} />

我不知道什么是正确答案以及为什么：/你能帮我吗？

Answer 1

如果是无状态的props.items 。 如果它是一个类this.props.items

无状态功能组件通常看起来像这样。

只将一个道具传递给孩子就是这样。

const ChildComponent = ({ someProp }) => (
   <div>
      <h1>Child Component {someProp}</h1>
   </div>
)

将所有父母道具传递给孩子会像这样。

const ChildComponent = (props) => (
   <div>
      <h1>Child Component {props.someProp}</h1>
   </div>
)

Answer 2

您可以使用 props.itemName 访问所有道具。 例如：只需输入 props.items

Answer 3

您的功能组件将如下所示，

const IngredientList = props => {
  // here you get all the props passed to IngredientList
  const items = props.items.map(item => <div>item</div>);

  return <div>items</div>
}