反应-在渲染功能中使用嵌套地图功能来创建2D板/网格

Question

我对React还是很陌生，我正在创建John Conway的“生活游戏”项目。 我正在尝试创建一个2D正方形的网格作为我的游戏板。

我的方法是在渲染/返回中使用map函数来创建网格。 我有一个包含以下内容的Square.js组件：

import React, { Component } from 'react';

const Square = () => {
  return (

      <td className="Square"></td>

  );
}

export default Square;

然后在App.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传递）数组的状态-请勿在render方法/调用期间创建此组件！

在开始时创建一个数组（构造函数），并使用map函数的索引读取“单元格/字段”。

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

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

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