React:以编程方式创建网格
提问于 2021-07-20 01:41:14
全新的反应。在react tic-tac-toe教程中，他们用下面的代码创建了一个3x3的硬编码网格：
render() {
return (
<div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}有没有可能基于传递给props的gridSize创建一个网格，使得render()中的整个代码都是一个循环？类似于：
render() {
return (
<div>
for (let row=0; row<props.gridSize; row++) {
<BoardRow rowIndex=row cols=gridSize> (how to pass two parameters to BoardRow?)
}
</div>
);
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-20 01:44:16
使用几个Array.from来创建给定长度的新数组，您可以将外部索引(0到2)乘以3，然后将其添加到内部索引(0到2)。
render() {
return (
<div>{
Array.from({ length: 3 }, (_, i) => (
<div className="board-row">{
Array.from({ length: 3 }, (_, j) => (
this.renderSquare((i * 3) + j)
))
}</div>
))
}</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68448655
复制
![[最新版]Cypress10.x版本迁移指南](https://ask.qcloudimg.com/http-save/yehe-2059614/b32a81445014f6e3fa7afd144a226544.png)
腾讯云开发者
