通过React循环遍历数组并使用该数据渲染子组件的多个实例。

Question

我有一个名为ListContainer的父组件，其中包含一个名为ListItem的子组件。我需要为名为nameArray的数组中的每个项目调用ListItem，并需要从此数组中的值填充ListItem的名称。

export const ListItem = (props) => {
  return <h2>Name: { props.name }</h2>;
};

export const ListContainer = (props) => {
  const nameArray = [
    {
      name: "john",
      age: "29"
    },
    {
      name: "james",
      age: "21"
    }
  ];
  return (
      <div>
      { this.nameArray.map(function(item) {
          return (
            <ListItem name={ item.name } />
          )
      }) }
      </div>
    );
};

通过查看文档，我认为我需要使用map函数，但是我对其在JSX中的工作方式感到困惑。

https://facebook.github.io/react/docs/lists-and-keys.html

Answer 1

您正在尝试引用在render函数中创建的局部变量，因此请this从中删除this.nameArray.map

{ nameArray.map( (item, i) => <ListItem key={i} name={ item.name } /> )}

同样，您的react组件在这里是一个内联无状态组件。它只是一个没有反应this上下文的常规功能。又名你没有this.props或this.state。你刚刚有props。当您想访问道具时，您只需输入道具而不是this.props