无状态功能组件 - React

Question

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

<IngredientList items={ingredient.items} />

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

Answer 1

如果它是无状态的props.items。如果它是 class this.props.items

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

只将一个道具传递给 child 就像这样。

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

将所有 parents 道具传递给 child 就像这样。

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>
}

无状态功能组件 - React

Stateless Functional Component - React

reactjs

react-props