我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:

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

我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。


当前回答

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

如上所述,在返回之前,存储数组中的所有元素回路内部回路方法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>)

其他回答

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

使用地图功能。

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

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

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

           })()}
        </tbody>

我使用这个:

gridItems = this.state.applications.map(app =>
          <ApplicationItem key={app.Id} app={app } />
);

PS:千万不要忘记钥匙,否则会有很多警告!

使用Array映射函数是一种非常常见的循环遍历元素数组并在React中根据元素创建组件的方法。这是一种很好的循环方式,非常有效,也是在JSX中进行循环的一种整洁的方式。这不是唯一的方法,而是首选的方法。

此外,不要忘记根据需要为每个迭代提供唯一的Key。map函数从0创建一个唯一索引,但不建议使用生成的索引,但如果您的值是唯一的或存在唯一的键,则可以使用它们:

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

此外,如果您不熟悉Array上的map函数,MDN中的几行代码:

map为数组,并根据结果构造一个新数组。回调仅对具有赋值的数组的索引调用,包括未定义的。对于缺少数组(即从未设置过的索引删除或从未被赋值)。回调是用三个参数调用的:元素的值,元素的索引和正在遍历的Array对象。如果向映射提供了thisArg参数,它将用作callback就是这个值。否则,未定义的值将用作这就是它的价值。回调最终可观察到的值为根据通常的规则确定通过函数。map不会改变调用它的数组(尽管回调(如果调用)可能会这样做)。