React双重循环渲染棋盘

1.非循环渲染（写死）

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

​

2.双重循环渲染（map循环）

render() {
        const row = [ 0, 1, 2 ];
        const col = [ 0, 1, 2 ];
        return (
            <div>
                {row.map((e, index1) =>
                    <div key={e} className="board-row">