有几个答案指向使用map语句。下面是一个完整的示例，它使用FeatureList组件中的迭代器基于一个称为features的JSON数据结构列出Feature组件。

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
); 

您可以在GitHub上查看完整的FeatureList代码。此处列出了特征夹具。

想象一下，你只是在调用JavaScript函数。不能在函数调用的参数所在的位置使用for循环：

return tbody(
    for (let i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

看看函数tbody是如何作为参数传递给for循环的——导致语法错误。

但您可以创建一个数组，然后将其作为参数传入：

const rows = [];
for (let i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

使用JSX时，基本上可以使用相同的结构：

const rows = [];
for (let i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

顺便说一下，我的JavaScript示例几乎与JSX的示例完全相同。玩Babel REPL，了解JSX的工作原理。

您可以创建如下新组件：

将键和数据传递给ObjectRow组件，如下所示：

export const ObjectRow = ({key,data}) => {
    return (
      <div>
          ...
      </div>
    );
}

创建新组件ObjectRowList，使其充当数据的容器：

export const ObjectRowList = (objectRows) => {
    return (
      <tbody>
        {objectRows.map((row, index) => (
          <ObjectRow key={index} data={row} />
        ))}
      </tbody>
    );
}

…或者，您也可以准备一个对象数组，并将其映射到函数以获得所需的输出。我更喜欢这一点，因为它有助于我保持在渲染返回中没有逻辑的良好编码实践。

render() {
const mapItem = [];
for(let i =0;i<item.length;i++) 
  mapItem.push(i);
const singleItem => (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (
  <ObjectRow/>
)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}

只需使用.map（）循环遍历集合，并从每个迭代返回带有道具的＜ObjectRow＞项。

假设对象是某处的数组。。。

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>

如果numrows是一个数组，则非常简单：

<tbody>
   {numrows.map(item => <ObjectRow />)}
</tbody>

React中的数组数据类型要好得多。一个数组可以支持一个新的数组，并支持过滤、减少等。