我不确定这是否适用于您的情况，但通常[map][1]是一个很好的答案。

如果这是使用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>

objects.map是进行循环的最佳方式，objects.filter是过滤所需数据的最佳方式。过滤后的数据将形成一个新的数组和对象。some是检查数组是否满足给定条件的最佳方法（它返回布尔值）。

您的JSX代码将编译成纯JavaScript代码，任何标记都将被ReactElement对象替换。在JavaScript中，不能多次调用函数来收集返回的变量。

这是非法的，唯一的方法是使用数组来存储函数返回的变量。

或者您可以使用Array.prototype.map来处理这种情况，Array.prototype.map自JavaScriptES5以来就可用。

也许我们可以编写其他编译器来重新创建一个新的JSX语法来实现一个repeat函数，就像Angular的ng repeat一样。

除非声明函数并用参数将其括起来，否则这是不可能的。在JSXExpression中，您只能编写表达式，而不能编写诸如for（）、声明变量或类或if（）语句之类的语句。

这就是为什么函数CallExpressions现在如此流行的原因。我的建议是：习惯它们。我会这样做：

const names = ['foo', 'bar', 'seba']
const people = <ul>{names.map(name => <li>{name}</li>)}</ul>

过滤：

const names = ['foo', undefined, 'seba']
const people = <ul>{names.filter(person => !!person).map(name => <li>{name}</li>)}</ul>

if（）：

var names = getNames()
const people = {names && names.length &&
   <ul>{names.map(name => <li>{name}</li>)}</ul> }

如果-其他：

var names = getNames()
const people = {names && names.length ?
  <ul>{names.map(name => <li>{name}</li>)}</ul> : <p>no results</p> }

如果numrows是一个数组，那么最好的方法就是map方法。如果不是，并且您只能从JSX访问它，您也可以使用以下ES6方法：

<tbody>
    {
      [...Array(numrows).fill(0)].map((value,index)=><ObjectRow key={index} />)
    }
</tbody>

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

您需要向数组中添加元素并渲染元素数组。这有助于减少重新渲染组件所需的时间。

下面是一些可能有用的粗略代码：

MyClass extends Component {
    constructor() {
        super(props)
        this.state = { elements: [] }
    }
    render() {
        return (<tbody>{this.state.elements}<tbody>)
    }
    add() {
        /*
         * The line below is a cheap way of adding to an array in the state.
         * 1) Add <tr> to this.state.elements
         * 2) Trigger a lifecycle update.
         */
        this.setState({
            elements: this.state.elements.concat([<tr key={elements.length}><td>Element</td></tr>])
        })
    }
}