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

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

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

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

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

如果您还没有像@FakeRainBrigand的答案那样的要映射（）的数组，并且希望内联该数组，以使源布局与比@SophieAlpert的答案更接近的输出相对应：

使用ES2015（ES6）语法（扩展和箭头函数）

http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

回复：使用Babel进行传输时，其警告页面显示Array.from是传播所必需的，但目前（v5.2.23）在传播实际的Array时似乎并非如此。我有一个文件问题需要澄清。但请自行承担风险或使用polyfill。

香草ES5

阵列应用

<tbody>
  {Array.apply(0, Array(10)).map(function (x, i) {
    return <ObjectRow key={i} />;
  })}
</tbody>

内联IIFE

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

其他答案的技术组合

保持与输出相对应的源布局，但使内联部分更紧凑：

render: function () {
  var rows = [], i = 0, len = 10;
  while (++i <= len) rows.push(i);

  return (
    <tbody>
      {rows.map(function (i) {
        return <ObjectRow key={i} index={i} />;
      })}
    </tbody>
  );
}

使用ES2015语法和数组方法

对于Array.prototype.fill，您可以这样做，作为使用如上所示的排列的替代方法：

<tbody>
  {Array(10).fill(1).map((el, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

（我认为你实际上可以省略fill（）的任何参数，但我不是100%。）感谢@FakeRainBrigand在fill（）解决方案的早期版本中纠正了我的错误（请参阅修订版）。

key

在所有情况下，关键属性都会减轻开发构建的警告，但在孩子中无法访问。如果希望子级中的索引可用，可以传递额外的属性。有关讨论，请参见列表和键。

在React中使用map是迭代数组的最佳实践。

为了防止ES6出现一些错误，React中使用了如下语法映射：

<tbody>
    {items.map((item, index) => <ObjectRow key={index} name={item.name} />)}
</tbody>

在这里，您调用一个组件＜ObjectRow/＞，因此不需要在箭头后面加括号。

但你也可以这样做：

{items.map((item, index) => (
    <ObjectRow key={index} name={item.name} />
))}

Or:

{items.map((item, index) => {
    // Here you can log 'item'
    return (
        <ObjectRow key={index} name={item.name} />
    )
})}

我这么说是因为如果在箭头后面加上括号“｛｝”，React将不会抛出错误，并显示白名单。

如果选择在render方法的return（）内部转换此值，最简单的方法就是使用map（）方法。使用Map（）函数将数组映射到JSX语法，如下所示（使用ES6语法）。

在父组件内部：

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value} />) }
</tbody>

请注意，key属性已添加到子组件中。如果没有提供密钥属性，您可以在控制台上看到以下警告。

警告：数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。

注意：人们经常犯的一个错误是在迭代时使用索引作为关键字。使用元素的索引作为键是一种反模式，您可以在这里阅读有关它的更多信息。简而言之，如果它不是一个静态列表，就不要使用索引作为键。

现在，在ObjectRow组件中，可以从对象的财产访问该对象。

在ObjectRow组件内部

const { object } = this.props

Or

const object = this.props.object

这将获取从父组件传递到ObjectRow组件中的变量对象的对象。现在，您可以根据您的目的吐出该对象中的值。

参考文献：

JavaScript中的map（）方法

ECMAScript 6或ES6

ECMAScript 2015/Babel可能使用生成器函数创建JSX数组：

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>

return (
    <table>
       <tbody>
          {
            numrows.map((item, index) => {
              <ObjectRow data={item} key={index}>
            })
          }
       </tbody>
    </table>
);