错误要求

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>
    );
  }
}

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组件视为视图-达到给定数组（作为prop传递）的渲染状态-不在渲染方法/调用期间创建该组件！

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

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

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

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

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

2 个答案:

错误要求