无状态功能组件 - React

Question

I am new to React and I am doing some tutorials online. Now I have task like this: If the Component in the following code is a Stateless Functional Component, what expression would you write to access the items prop inside the Component?

<IngredientList items={ingredient.items} />

I have no idea what is correct answer and why :/ Would you be so kind to help me ?

Answer 1

If it's stateless props.items . If its a class this.props.items

Stateless functional components typically look something like this.

Passing just a single prop to a child would like this.

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

Passing all of the parents props to a child would like like this.

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

Answer 2

You can access all your props by using props.itemName. Ex: By simply typing props.items

Answer 3

Your functional component will look something like below,

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