React -使用render function中的嵌套贴图函数创建2D电路板/网格

Question

我仍然是一个新的反应，我正在创建一个约翰·康维的生活游戏项目。我正在尝试创建一个2D网格的方块作为我的游戏的棋盘。

我的方法是在render/return中使用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>
    );
  }
}

Here is what I have so far。如果我像<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组件视为给定(作为属性传递)数组的view - to 呈现状态-而不是在呈现方法/调用期间创建该状态！

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

你可以在render中使用一个线性数组- length=width*height - single map函数，并使用css/single将它们按正方形和板宽包装成行。板宽可以在构造函数中预先计算(当在生命周期中不变时)-板宽= boardWidth *正方形宽度-并在JSX中传递。

当然，您可以使用两个map 来创建2D线路板。它可以用于使用<table/>和<tr/><td> html结构进行渲染，或者出于性能原因。有了第二个选项，创建单独的组件并将部分数据作为prop -传递，它(几乎)无论它是单独的数组(更好)还是线性数组的范围-在内部， Row 将在一个简单的数组(和一个map fn)上工作。它应该取决于引擎的要求。

在.中寻找灵感你有更简单的情况--你不需要返回事件/动作。