在React Js中实现两个for循环，为tic-tac-toe创建一个3X3方阵框

Question

我正在关注官方网站上的React Js教程，这有助于我们构建一个tic-tac-toe game。通过对所有正方形进行硬编码来创建方框，如下所示：

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

我设法通过使用for循环缩短代码，如下所示：

render(){
  let sqrRen = [];
  for(let i = 0; i < 9; i=i+3){
    sqrRen.push(<div className = "board-row">
      {this.renderSquare(0+i)}
      {this.renderSquare(1+i)}
      {this.renderSquare(2+i)} 
    </div>);
  }
  return (
    <div>
        {sqrRen}
    </div>
  );
}

但我还想使用另一个for循环生成每行中的方块，如下所示：

render(){
  let sqrRen = [];
  for(let i = 0; i < 9; i=i+3){
    sqrRen.push(<div className = "board-row">
      {
        for(let j=0;j<3;j++){
        this.renderSquare(j+i)
        }
      }
    </div>);
  }

  return (
    <div>
      {sqrRen}
    </div>
  );
}

但这不起作用。我收到以下错误：

关于如何使用两个for循环的任何建议？

Answer 1

你不需要使用通常的for循环，因为它们看起来非常混乱。相反，您应该利用新的ES6功能和语法来实现更清晰，更易理解的方法。

下面的解决方案可以很好地呈现3x3井字游戏板：

import chunk from 'lodash/chunk';

const styles = { width: '40px', height: '40px', float: 'left', textAlign: 'center' };

return (

        <div className="tic-tac-toe-container">
            {chunk(new Array(9).fill(0), 3).map((item, itemIndex) => {
                return (
                    <div key={itemIndex} className="row">
                        {item.map(col => <div className="col" style={styles}>COL</div>)}
                    </div>
                )
            })
            }
        </div>
    );

Answer 2

由于我也在寻找这个，所接受的答案指出了正确的方向。虽然我没有lodash做了一个稍微不同的实现。

render() {
  const rowCount = 3, colCount = 3;
  return (
    <div>
      {[...new Array(rowCount)].map((x, rowIndex) => {
        return (
          <div className="board-row" key={rowIndex}>
            {[...new Array(colCount)].map((y, colIndex) => this.renderSquare(rowIndex*colCount + colIndex) )}
          </div>
        )
      })
      }
    </div>
  );
}

Answer 3

您在控制台中遇到的错误是什么？我的第一个猜测是你没有在循环中定义j。尝试

设j = 0

Answer 4

由于我昨天坚持这个额外的问题几个小时并最终达到了这个“两个For循环”解决方案，让我在这里分享它为即将到来的反应学习者。

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        key={i} //prevent warning
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    const row = [];
    let k = 0; //key
    for (let i = 0; i < 3; i++) {
      const col = [];
      for (let j = 0; j < 3; j++) {
        col.push(this.renderSquare(3*i+j)); //push argument without {}, <>
        k++;
      }
      row.push(<div key={k} className="board-row">{col}</div>);
    }
    return (
      <div>
        {row}
      </div>
    );
  }
}

最重要的部分是弄清楚如何使用push组装JSX语法。这里“this.renderSquare（3 * i + j）”将返回元素，这就是我们想要的。我个人认为这比Array.prototype.map解决方案更好。