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

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

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

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

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

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

您可以执行以下操作：

let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}

你当然可以按照另一个答案的建议用.map来解决。如果您已经使用了Babel，可以考虑使用jsx控制语句。

它们需要一些设置，但我认为在可读性方面是值得的（特别是对于非React开发人员）。如果使用linter，还有eslint-plugin-jsx控制语句。

如果您已经在使用lodash，_.times函数很方便。

import React, { Component } from "react";
import Select from "./Select";
import _ from "lodash";

export default class App extends Component {
  render() {
    return (
      <div className="container">
        <ol>
          {_.times(3, (i) => (
            <li key={i}>repeated 3 times</li>
          ))}
        </ol>
      </div>
    );
  }
}

想象一下，你只是在调用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的工作原理。

如果在JSX中需要JavaScript代码，可以添加｛｝，然后在这些括号中编写JavaScript代码。就这么简单。

同样，您可以在JSX/react中循环。

Say:

<tbody>
    {`your piece of code in JavaScript` }
</tbody>

例子：

<tbody>
    { items.map((item, index) => {
        console.log(item)}) ; // Print item
        return <span>{index}</span>;
    } // Looping using map()
</tbody>