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

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

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


当前回答

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

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

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

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

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

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

其他回答

您可能需要签出React Templates,它允许您在React中使用JSX样式的模板,并带有一些指令(例如rt repeat)。

如果使用反应模板,您的示例如下:

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>

您可以在React for循环中使用.map()。

<tbody>
    { newArray.map(() => <ObjectRow />) }
</tbody>

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

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

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

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

以下是您可以在React中通过迭代对象数组或普通数组实现的可能解决方案

const rows = [];
const numrows = [{"id" : 01, "name" : "abc"}];
numrows.map((data, i) => {
    rows.push(<ObjectRow key={data.id} name={data.name}/>);
});

<tbody>
    { rows }
</tbody>

Or

const rows = [];
const numrows = [1,2,3,4,5];
for(let i=1, i <= numrows.length; i++){
    rows.push(<ObjectRow key={numrows[i]} />);
};

<tbody>
    { rows }
</tbody>

最近几天,我熟悉的一种更好的迭代对象数组的方法是直接在渲染中使用.map,可以返回也可以不返回:

.map带返回

 const numrows = [{"id" : 01, "name" : "abc"}];
 <tbody>
     {numrows.map(data=> {
         return <ObjectRow key={data.id} name={data.name}/>
     })}
</tbody>

.map不返回

 const numrows = [{"id" : 01, "name" : "abc"}];
 <tbody>
     {numrows.map(data=> (
         <ObjectRow key={data.id} name={data.name}/>
     ))}
</tbody>

使用映射到循环

 Array.map(arrayItem => {
return <ObjectRow arrayItem={arrayItem}/> // pass array item in component
})