不能在JSX中直接使用任何循环或其他额外方法。相反，您可以做的是为其生成单独的函数，并生成循环语句，然后在该函数中返回组件上述代码示例：

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

<tbody>
{renderObjectRow()}
</tbody>

在迭代数组和生成JSX元素方面有很多解决方案。所有这些都很好，但都直接在循环中使用了索引。我们建议使用数据中的唯一id作为键，但如果数组中的每个对象没有唯一id，我们将使用索引作为键，但是不建议直接使用索引作为密钥。

还有一件事，为什么我们选择.map，但为什么不选择foEach，因为.map返回一个新数组。现在有很多不同的方法。

下面使用.map的不同版本详细说明了如何使用唯一键以及如何使用.map循环JSX元素。

当从数据中返回单个JSX元素和唯一id作为密钥版本时，.map不返回：

const {objects} = this.state;

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

将数据中的多个JSX元素和唯一id作为密钥版本返回时，不返回.map

const {objects} = this.state;

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

当将单个JSX元素和索引作为键版本返回时，.map没有返回：

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => <ObjectRow obj={object} key={`Key${index}`} />)}
</tbody>

当返回多个JSX元素和索引作为密钥版本时，.map没有返回：

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => (
        <div key={`Key${index}`}>
            <ObjectRow obj={object} />
        </div>
    ))}
</tbody>

.map，当返回多个JSX元素和索引作为键版本时返回：

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => {
        return (
            <div key={`Key${index}`}>
                <ObjectRow obj={object} />
            </div>
        )
    })}
</tbody>

将数据中的多个JSX元素和唯一id作为密钥版本返回时，使用return的.map：

const {objects} = this.state;

<tbody>
    {objects.map(object => {
        return (
            <div key={object.id}>
                <ObjectRow obj={object} />
            </div>
        )
    })}
</tbody>

另一种方式是

render() {
  const {objects} = this.state;
  const objectItems = objects.map(object => {
       return (
           <div key={object.id}>
               <ObjectRow obj={object} />
           </div>
       )
  })
  return(
      <div>
          <tbody>
              {objectItems}
          </tbody>
      </div>
   )
}

function PriceList({ self }) {
    let p = 10000;
    let rows = [];
    for(let i=0; i<p; i=i+50) {
        let r = i + 50;
        rows.push(<Dropdown.Item key={i} onClick={() => self.setState({ searchPrice: `${i}-${r}` })}>{i}-{r} &#8378;</Dropdown.Item>);
    }
    return rows;
}

<PriceList self={this} />

我找到了另一个解决方案提供：

 <tbody>{this.getcontent()}</tbody>

还有一个单独的功能：

getcontent() {
    const bodyarea = this.state.movies.map(movies => (
        <tr key={movies._id}>
            <td>{movies.title}</td>
            <td>{movies.genre.name}</td>
            <td>{movies.numberInStock}</td>
            <td>{movies.publishDate}</td>
            <td>
                <button
                    onClick={this.deletMovie.bind(this, movies._id)}
                    className="btn btn-danger"
                >
                    Delete
                </button>
            </td>
        </tr>
    ));
    return bodyarea;
}

这个例子很容易解决许多问题。

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

在React中使用map是迭代数组的最佳实践。

为了防止ES6出现一些错误，React中使用了如下语法映射：

<tbody>
    {items.map((item, index) => <ObjectRow key={index} name={item.name} />)}
</tbody>

在这里，您调用一个组件＜ObjectRow/＞，因此不需要在箭头后面加括号。

但你也可以这样做：

{items.map((item, index) => (
    <ObjectRow key={index} name={item.name} />
))}

Or:

{items.map((item, index) => {
    // Here you can log 'item'
    return (
        <ObjectRow key={index} name={item.name} />
    )
})}

我这么说是因为如果在箭头后面加上括号“｛｝”，React将不会抛出错误，并显示白名单。