React - 在渲染函数中使用嵌套地图函数来创建 2D 板/网格

Question

我对React还是新手，我正在努力创建一个John Conway's Game of Life项目。我正在尝试创建一个 2D 正方形网格作为我的游戏板。

我的方法是在渲染/返回中使用地图函数来创建网格。我有一个 Square.js 组件，它由以下内容组成：

import React, { Component } from 'react';
const Square = () => {
return (
<td className="Square"></td>
);
}
export default Square;

然后在我的应用程序中.js我尝试使用嵌套的 .map 函数来创建正方形的 2D 网格。我已经成功地创建了一组水平的正方形，但我正在努力嵌套两个 .map 函数来创建网格。

class App extends Component {
constructor(props){
super(props);
this.state = {
boardHeight: 10,
boardWidth: 50
};
}
render() {
return (
<div>
<table className="table-board">
<tbody>
{Array(this.state.boardHeight).fill(1).map((el, i) => {
return (
<Square key={i} />
);
})}
</tbody>
</table>
</div>
);
}
}

这是我到目前为止所拥有的。如果我像这样将组件包装在表格行中<tr><Square key={i} /></tr>我可以使网格垂直。

如何嵌套两个 .map 函数以使网格 2D ？

这是我尝试过的，但我无法让它工作：

return (
<div>
<table className="table-board">
<tbody>
{Array(this.state.boardHeight).fill(1).map((el, i) => {
{Array(this.state.boardWidth).fill(1).map((el, j) => {
return (
<div>
<tr><Square key={j} /></tr>
<Square key={i} />
</div>
);
})}
})}
</tbody>
</table>
</div>
);

Answer 1

好吧，您基本上可以按行映射，这会更容易。不要忘记在构造函数中绑定方法。

renderRow(el, i) {
return <tr key={i}> {Array(this.state.boardWidth).fill(1).map(this.renderColumns)} </tr>
}
renderColumn(el, j) {
return <Square key={j} />
}
render() {
return {Array(this.state.boardHeight).fill(1).map(this.renderRow)
}

Answer 2

不好的要求

您应该将 react 组件视为视图 -渲染给定(作为 prop 传递(数组的状态 - 而不是在渲染方法/调用期间创建它！

在启动时创建一个数组(构造函数(，并使用map函数的索引来读取"单元格/字段"。

您可以在渲染中使用一个线性数组-length=width*height- 单个地图函数，并使用 css/样式按正方形和板宽将它们包装成行。电路板宽度可以在构造函数中预先计算(当在生命周期中未更改时( - 板宽度 =boardWidth* 平方宽度 - 并在 JSX 中传递。

当然，您可以使用两个map功能来创建2D板。它可用于使用<table/>和<tr/><td>html 结构进行呈现，或出于性能原因。使用第二个选项创建单独的组件并将部分数据作为 prop 传递 - 它(几乎(是单独的数组(更好(还是线性数组的范围并不重要 - 内部Row将处理一个简单的数组(和一个mapfn(。这应该取决于发动机要求。

在这里寻找灵感。你有更简单的情况 - 你不必返回事件/移动。