这里有一个简单的解决方案。

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

不需要映射和复杂代码。您只需要将行推送到数组并返回值来渲染它。

如果选择在render方法的return（）内部转换此值，最简单的方法就是使用map（）方法。使用Map（）函数将数组映射到JSX语法，如下所示（使用ES6语法）。

在父组件内部：

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value} />) }
</tbody>

请注意，key属性已添加到子组件中。如果没有提供密钥属性，您可以在控制台上看到以下警告。

警告：数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。

注意：人们经常犯的一个错误是在迭代时使用索引作为关键字。使用元素的索引作为键是一种反模式，您可以在这里阅读有关它的更多信息。简而言之，如果它不是一个静态列表，就不要使用索引作为键。

现在，在ObjectRow组件中，可以从对象的财产访问该对象。

在ObjectRow组件内部

const { object } = this.props

Or

const object = this.props.object

这将获取从父组件传递到ObjectRow组件中的变量对象的对象。现在，您可以根据您的目的吐出该对象中的值。

参考文献：

JavaScript中的map（）方法

ECMAScript 6或ES6

这可以通过多种方式实现。

如上所述，在返回之前，存储数组中的所有元素回路内部回路方法1：让容器=[]；让arr=[1，2，3]//可以是任何数组、对象arr.forEach（（val，索引）=>{容器推送(＜div key＝｛index｝＞值</div>）/*** 1. 所有循环生成的元素都需要密钥* 2. 数组中只能放置一个父元素*例如container.push(*＜div key＝｛index｝＞值</div>＜div＞这将引发错误</div>)**/});返回(＜div＞<div>这里有任何东西</div>＜div＞｛container｝＜/div＞</div>)方法2：返回(＜div＞<div>这里有任何东西</div>＜div＞{(() => {让容器=[]；让arr=[1，2，3]//可以是任何数组、对象arr.forEach（（val，索引）=>{容器推送(＜div key＝｛index｝＞值</div>）});返回容器；})()}</div></div>)

如果在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>

您可以执行以下操作：

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

有多种方法可以做到这一点。JSX最终会被编译成JavaScript，所以只要你编写了有效的JavaScript，你就会很好。

我的回答旨在巩固这里已经介绍的所有精彩方式：

如果没有对象数组，只需输入行数：

在返回块中，创建一个Array并使用Array.prototype.map：

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

在返回块之外，只需使用普通的JavaScript for循环：

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

立即调用的函数表达式：

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

如果您有一个对象数组

在返回块中，.map（）将每个对象映射到<ObjectRow>组件：

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

在返回块之外，只需使用普通的JavaScript for循环：

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.push(<ObjectRow key={i} data={objectRows[i]} />);
  }
  return (
    <tbody>{rows}</tbody>
  );
}

立即调用的函数表达式：

render() {
  return (
    <tbody>
      {(() => {
        const rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}