我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
简单的方法
您可以将numrows置于状态,并使用map()代替for循环:
{this.state.numrows.map((numrows , index) => {
return (
<ObjectRow
key={index}
/>
其他回答
…或者,您也可以准备一个对象数组,并将其映射到函数以获得所需的输出。我更喜欢这一点,因为它有助于我保持在渲染返回中没有逻辑的良好编码实践。
render() {
const mapItem = [];
for(let i =0;i<item.length;i++)
mapItem.push(i);
const singleItem => (item, index) {
// item the single item in the array
// the index of the item in the array
// can implement any logic here
return (
<ObjectRow/>
)
}
return(
<tbody>{mapItem.map(singleItem)}</tbody>
)
}
@jacefarm如果我理解正确,您可以使用以下代码:
<tbody>
{ new Array(numrows).fill(<ObjectRow/>) }
</tbody>
您可以使用以下代码:
<tbody>
{ new Array(numrows).fill('').map((item, ind) => <ObjectRow key={ind}/>) }
</tbody>
还有这个:
<tbody>
new Array(numrows).fill(ObjectRow).map((Item, ind) => <Item key={ind}/>)
</tbody>
我使用这个:
gridItems = this.state.applications.map(app =>
<ApplicationItem key={app.Id} app={app } />
);
PS:千万不要忘记钥匙,否则会有很多警告!
你必须用JSX写:
<tbody>
{
objects.map((object, i) => (
<ObjectRow obj={object} key={i} />
));
}
</tbody>
也可以在返回块外部提取:
render: function() {
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return (<tbody>{rows}</tbody>);
}