我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
你必须用JSX写:
<tbody>
{
objects.map((object, i) => (
<ObjectRow obj={object} key={i} />
));
}
</tbody>
其他回答
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>
)
}
由于您在JSX代码中编写JavaScript语法,因此需要将JavaScript代码包装在大括号中。
row = () => {
var rows = [];
for (let i = 0; i<numrows; i++) {
rows.push(<ObjectRow/>);
}
return rows;
}
<tbody>
{this.row()}
</tbody>
我使用这个:
gridItems = this.state.applications.map(app =>
<ApplicationItem key={app.Id} app={app } />
);
PS:千万不要忘记钥匙,否则会有很多警告!
如果您已经在使用lodash,_.times函数很方便。
import React, { Component } from "react";
import Select from "./Select";
import _ from "lodash";
export default class App extends Component {
render() {
return (
<div className="container">
<ol>
{_.times(3, (i) => (
<li key={i}>repeated 3 times</li>
))}
</ol>
</div>
);
}
}
如果您习惯于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开发工具: