我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。
我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
这是我迄今为止在大多数项目中使用的方法:
const length = 5;
...
<tbody>
{Array.from({ length }).map((_,i) => (
<ObjectRow key={i}/>
))}
</tbody>
其他回答
可以在reactjs中对循环使用.map()
<tbody>
{items.map((value, index) => {
return <li key={index}>{value}</li>
})}
</tbody>
)
不能在JSX中直接使用任何循环或其他额外方法。相反,您可以做的是为其生成单独的函数,并生成循环语句,然后在该函数中返回组件上述代码示例:
function renderObjectRow (){
for (var i=0; i < numrows; i++) {
return <ObjectRow/>
}
}
<tbody>
{renderObjectRow()}
</tbody>
如果没有键值par,则使用以下代码打印数组值-
<div>
{my_arr.map(item => <div>{item} </div> )}
</div>
请试试这个
<tbody>
{Array.apply(0, Array(numrows)).map(function (x, i) {
return <ObjectRow/>;
})}
</tbody>
or
{[...Array(numrows)].map((x, i) =>
<ObjectRow/>
)}
在JSX块中围绕JavaScript代码使用{},使其正确执行您尝试执行的任何JavaScript操作。
<tr>
<td>
{data.map((item, index) => {
{item}
})}
</td>
</tr>
这有点模糊,但您可以为任何阵列交换数据。这将为每个项提供一个表行和表项。如果阵列的每个节点中都有不止一个对象,那么您将希望通过执行以下操作来实现这一目标:
<td>{item.someProperty}</td>
在这种情况下,您将希望用不同的td包围它,并以不同的方式排列前面的示例。