我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
return (
<table>
<tbody>
{
numrows.map((item, index) => {
<ObjectRow data={item} key={index}>
})
}
</tbody>
</table>
);
其他回答
如果您习惯于Angular,并希望采用更像React的方法:
尝试使用这个带有自动哈希和可选trackBy的简单组件,类似于Angular。
用法:
<For items={items}>
{item => <div>item</div>}
</For>
自定义键/轨迹依据:
<For items={items} trackBy={'name'}>
{item => <div>item</div>}
</For>
定义:
export default class For<T> extends Component<{ items: T[], trackBy?: keyof T, children: (item: T) => React.ReactElement }, {}> {
render() {
return (
<Fragment>
{this.props.items.map((item: any, index) => <Fragment key={this.props.trackBy ?? item.id ?? index}>{this.props.children(item)}</Fragment>)}
</Fragment>
);
}
}
React开发工具:
如果没有键值par,则使用以下代码打印数组值-
<div>
{my_arr.map(item => <div>{item} </div> )}
</div>
Array.from是最好的方法。如果您想创建一个具有一定长度的JSX数组。
function App() {
return (
<tbody>
{Array.from({ length: 10 }, (_, key) => (
<ObjectRow {...{ key }} />
))}
</tbody>
);
}
上面的示例适用于没有数组的情况,因此,如果您有数组,则应在JSX中将其映射为:
function App() {
return (
<tbody>
{list.map((item, key) => (
<ObjectRow {...{ key }} />
))}
</tbody>
);
}
只需执行以下操作:
<tbody>{new Array(numRows).fill(“”,0,numRows”).map((p,i)=><YourRaw key={i}/>)}</tbody>
您可以从numRows创建数组并映射它
像这样的东西:
<tbody>
{Array.from({ length: numrows }).map((_,i)=><ObjectRow key={i}/>)
</tbody>