在 React JSX 中循环

我正在尝试在 React JSX 中执行以下操作（其中 ObjectRow 是一个单独的组件）：

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

我意识到并理解为什么这不是有效的 JSX，因为 JSX 映射到函数调用。然而，来自模板领域并且是 JSX 的新手，我不确定如何实现上述（多次添加组件）。

javascript reactjs

答案

可以想象它就像你只是调用 JavaScript 函数一样。你不能使用for循环，其中函数调用的参数将是：

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

看看函数tbody如何作为参数传递for循环，当然这是一个语法错误。

但是你可以创建一个数组，然后将其作为参数传递：

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

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

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add 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 的工作原理。

不确定这是否适用于您的情况，但通常地图是一个很好的答案。

如果这是你的代码与 for 循环：

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</tbody>

你可以用map写这样的：

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

ES6 语法：

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

如果你还没有像 @FakeRainBrigand 的答案那样有一个map()数组，并想要内联这个，那么源布局对应的输出比 @ SophieAlpert 的答案更接近：

使用 ES2015（ES6）语法（扩展和箭头功能）

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

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

Re：与 Babel 一起转发，其警告页面说Array.from是传播所必需的，但目前（ v5.8.23 ）在传播实际Array时似乎并非如此。我有一个文档问题，以澄清这一点。但请自担风险或使用 polyfill。

香草 ES5

`Array.apply`

<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`方法

使用Array.prototype.fill您可以将此作为使用 spread 的替代方法，如上所示：

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

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

`key`

在所有情况下， key attr 都会缓解开发构建的警告，但在子代中无法访问。如果您希望子项中的索引可用，则可以传递额外的 attr。有关讨论，请参阅列表和密钥。

答案