render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

使用Array映射函数是一种非常常见的循环遍历元素数组并在React中根据元素创建组件的方法。这是一种很好的循环方式，非常有效，也是在JSX中进行循环的一种整洁的方式。这不是唯一的方法，而是首选的方法。

此外，不要忘记根据需要为每个迭代提供唯一的Key。map函数从0创建一个唯一索引，但不建议使用生成的索引，但如果您的值是唯一的或存在唯一的键，则可以使用它们：

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

此外，如果您不熟悉Array上的map函数，MDN中的几行代码：

map为数组，并根据结果构造一个新数组。回调仅对具有赋值的数组的索引调用，包括未定义的。对于缺少数组（即从未设置过的索引删除或从未被赋值）。回调是用三个参数调用的：元素的值，元素的索引和正在遍历的Array对象。如果向映射提供了thisArg参数，它将用作callback就是这个值。否则，未定义的值将用作这就是它的价值。回调最终可观察到的值为根据通常的规则确定通过函数。map不会改变调用它的数组（尽管回调（如果调用）可能会这样做）。

也许是当今最大开发者的标准，使用这样的结构：

 let data = [
  {
    id: 1,
    name: "name1"
  },
  {
    id: 2,
    name: "name2"
  },
  {
    id: 3,
    name: "name3"
  },
  {
    id: 100,
    name: "another name"
  }
];

export const Row = data => {
  return (
    <tr key={data.id}>
      <td>{data.id}</td>
      <td>{data.name}</td>
    </tr>
  );
};

function App() {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>{data.map(item => Row(item))}</tbody>
    </table>
  );
}

在JSX中，在HTML或任何代码中编写JavaScript操作，｛data.map（item=>Row（item））｝，在map函数中使用单花括号。了解更多地图信息。

这里还可以看到以下输出。

这里有一个简单的解决方案。

var Object_rows = [];
for (var i = 0; i < numrows; i++) {
  Object_rows.push(<ObjectRow />);
}
<tbody>{Object_rows}</tbody>;

不需要映射和复杂代码。您只需要将行推送到数组并返回值来渲染它。

当我想添加一定数量的组件时，我使用助手函数。

定义一个返回JSX的函数：

const myExample = () => {
    let myArray = []
    for(let i = 0; i<5;i++) {
        myArray.push(<MyComponent/>)
    }
    return myArray
}

//... in JSX

<tbody>
    {myExample()}
</tbody>

如果没有键值par，则使用以下代码打印数组值-

<div>
    {my_arr.map(item => <div>{item} </div> )}                    
</div>