您还可以使用自调用函数：

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

           })()}
        </tbody>

您还可以使用自调用函数：

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

           })()}
        </tbody>

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

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

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

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

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

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

为了在您希望使用存储为整型值的特定行计数的情况下提供更直接的解决方案。

在typedArray的帮助下，我们可以通过以下方式实现所需的解决方案。

// Let's create a typedArray with length of `numrows`-value
const typedArray = new Int8Array(numrows); // typedArray.length is now 2
const rows = []; // Prepare rows-array
for (let arrKey in typedArray) { // Iterate keys of typedArray
  rows.push(<ObjectRow key={arrKey} />); // Push to an rows-array
}
// Return rows
return <tbody>{rows}</tbody>;

下面的代码将帮助您通过传递唯一的密钥道具在JSX中创建循环

import React, { Children, Fragment } from 'react';

export const ObjectRow = ({ data }) => (
 <div>
    <Fragment>{data}</Fragment>
 </div>
);


/** Wrapping your list inside React.Children.toArray allows you to not 
pass unique key props.
It will be dynamically generated from Virtual Dom to Real Dom */

export const ObjectRowListComponent = (objectRows) => (
<tbody>
    {Children.toArray(objectRows.map((row) => <ObjectRow data={row} />))}
</tbody>
);

如果您已经在使用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>
    );
  }
}