我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
您可以执行以下操作:
let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}
其他回答
如果您习惯于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开发工具:
也可以在返回块外部提取:
render: function() {
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return (<tbody>{rows}</tbody>);
}
只需使用带有ES6语法的map Array方法:
<tbody>
{items.map(item => <ObjectRow key={item.id} name={item.name} />)}
</tbody>
不要忘记密钥属性。
我不确定这是否适用于您的情况,但通常地图是一个很好的答案。
如果这是使用for循环的代码:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
你可以用地图这样写:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6语法:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
您的JSX代码将编译成纯JavaScript代码,任何标记都将被ReactElement对象替换。在JavaScript中,不能多次调用函数来收集返回的变量。
这是非法的,唯一的方法是使用数组来存储函数返回的变量。
或者您可以使用Array.prototype.map来处理这种情况,Array.prototype.map自JavaScriptES5以来就可用。
也许我们可以编写其他编译器来重新创建一个新的JSX语法来实现一个repeat函数,就像Angular的ng repeat一样。