gpt4 book ai didi

javascript - 使用 ReactJS 和 concat JSX 语法渲染时的 map 函数循环

转载 作者:行者123 更新时间:2023-11-30 07:22:26 25 4
gpt4 key购买 nike

非常简单的问题,当我在渲染时循环遍历数组时用 .map 使用react函数,说:

render() {
let board = this.props.board;

return (
<div>
{
board.map((piece,index) => {
return (
<Piece data={piece}/>
);
})
}
</div>
);
}

我正在尝试每 5 件添加一条分界线,所以 (index % 5 == 0)添加 <br /><Piece /> 之前
当我尝试与 + 连接时或者做这样的事情:

board.map((piece,index) => {
return (
(index % 5 == 0) ? <br /> : ''
<Piece data={piece}/>
);
})

我得到矩阵的输出 [Object object]

最佳答案

返回 [ <br />, <Piece> ] 的数组如果条件成立并只返回 Piece否则组件。 See the fiddle.

相关的代码是这样的:

return <div>{items.map(function (i, index) {
if (index % 5 === 0) {
return [ <br key={index + "break"} />, <Item key={index} num={i} /> ];
}

return <Item key={index} num={i} />;
})}</div>;

此外,输入 key在您从 map 返回的组件上或其他返回类数组实例的方法。这样,React 就不需要在每次渲染时取出所有生成的组件并替换它们,而只需在键下找到它们并更新它们的属性即可。查看Reconciliation在 React 文档中了解更多信息。

关于javascript - 使用 ReactJS 和 concat JSX 语法渲染时的 map 函数循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33855585/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com