我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
render() {
const elements = ['one', 'two', 'three'];
const items = []
for (const [index, value] of elements.entries()) {
items.push(<li key={index}>{value}</li>)
}
return (
<div>
{items}
</div>
)
}
其他回答
您可以执行以下操作来重复组件numrows次
<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>
甚至这段代码也能完成同样的工作。
<tbody>
{array.map(i =>
<ObjectRow key={i.id} name={i.name} />
)}
</tbody>
以下是您可以在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>
JSX内部有多种循环方式
使用for循环函数TableBodyForLoop(props){常量行=[];//创建数组以存储tr列表for(设i=0;i<props.people.length;i++){const person=道具.人物[i];//将tr推到数组,关键是行.推(<tr key={person.id}><td>{person.id}</td><td>{人名}</td></tr>);}//返回tbody内的行return<tbody>{rows}</tbody>;}使用ES6阵列映射方法函数TableBody(props){返回(<tbody>{props.people.map(person=>(<tr key={person.id}><td>{person.id}</td><td>{人名}</td></tr>))}</tbody>);}
完整示例:https://codesandbox.io/s/cocky-meitner-yztif
以下React文档将有所帮助
列表和键条件渲染
可以在reactjs中对循环使用.map()
<tbody>
{items.map((value, index) => {
return <li key={index}>{value}</li>
})}
</tbody>
)