这是我迄今为止在大多数项目中使用的方法：

const length = 5;
...
<tbody>
    {Array.from({ length }).map((_,i) => (
        <ObjectRow key={i}/>
    ))}
</tbody>

随着时间的推移，语言越来越成熟，我们经常会遇到这样的常见问题。问题是循环组件“n”次。

{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}

其中，n-是要循环的次数。项将未定义，索引将照常。此外，ESLint不鼓励使用数组索引作为键。

但是，您的优点是不需要在之前初始化数组，最重要的是避免了for循环。。。

为了避免项目未定义带来的不便，您可以使用_，这样在进行linting时就会忽略它，并且不会引发任何linting错误，例如

{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}

我见过一个人/以前的答案在数组中使用.contat（），但不是这样。。。

我已经使用concat添加到字符串中，然后通过jQuery选择器在元素上呈现JSX内容：

let list = "<div><ul>";

for (let i=0; i<myArray.length; i++) {
    list = list.concat(`<li>${myArray[i].valueYouWant}</li>`);
}

list = list.concat("</ul></div>);

$("#myItem").html(list);

不能在JSX中直接使用任何循环或其他额外方法。相反，您可以做的是为其生成单独的函数，并生成循环语句，然后在该函数中返回组件上述代码示例：

function renderObjectRow (){
   for (var i=0; i < numrows; i++) {
       return  <ObjectRow/>
     } 
}

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

如果您还没有像@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

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

您只能在JSX元素中编写JavaScript表达式，因此for循环无法工作。您可以先将元素转换为数组，然后使用map函数渲染它：

<tbody>
    {[...new Array(numrows)].map((e) => (
         <ObjectRow/>
    ))}
</tbody>