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

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

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

export const ListCOntainer= (props) => {
  const nameArray = [
    {
      name: "john",
      age: "29"
    },
    {
      name: "james",
      age: "21"
    }
  ];
  return (
      

      { this.nameArray.map(function(item) {
          return (
            
          )
      }) }
      
    );
};

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

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

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

{ nameArray.map( (item, i) =>  )}

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