我对 React 有一个小问题。我无法使用 for 循环创建嵌套组件。我想要做的是创建一个表格的 9 个单元格，然后创建 3 行，每行 3 个单元格，然后将 3 行安装在一起并创建一个 9x9 的板。

假设我想得到这样的东西，但使用循环

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

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

}

我搜索了几个小时的其他问题，我认为我的代码几乎是正确的，但它没有呈现我想要的。我只得到一个白页。

这是我的代码：

class Board extends React.Component { 

renderSquare(i) {
    return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
}

createCells(i){
    if(i%3){return;}
    var index = this.fillN(Array(i)); //index=[0,1,2,3,4,5,6,7,8]
    var cells = [];
    index.forEach(function(i){
        cells.push(() => {
            return(
                <div>
                    {this.renderSquare(i)}
                </div>
            );
        });
    });
    return cells;
}

createRows(cells){
    var index = this.fillMod3(Array(3)); //index=[0,3,6]
    var rows = []
    index.forEach(function(i){
        rows.push(() => {
            return(
                <div>
                    {cells[i]}
                    {cells[i+1]}
                    {cells[i+2]}
                </div>
            );
        });
    });
    return rows;
}

render(){    
    var cells = this.createCells(9);
    var rows = this.createRows(cells);
    var board = [];
    var index = this.fillN(Array(1));

    index.forEach(function(row){
        board.push(() => {
            return(
                <div>{row}</div>
            );
        });
    })

    return(
        <div>
            {board[0]}
        </div>
    );        
}

我总是在屏幕上看到这样的东西：

<Board>
  <div> /*empty*/ </div>
</Board>

我想澄清一下，我确信与该组件 (Board) 交互的其余代码没有问题。

我是react的新手，如果有人可以帮助我，我会非常感激。对不起我的英语不好

EDIT1：按照marklew的例子，我应该能够做这样的事情

    render(){   
    var index1 = this.fillN(Array(3)); //index1=[0,1,2]
    var index2 = this.fillN(Array(3)); //index2=[0,1,2]

    return(
        <div>
            {index1.map((e1,i1) => {
                return(
                    <div key={i1} className="board-row">
                        {index2.map((e2, i2) => {
                            return(
                                <p key={i2+10}>
                                    {this.renderSquare(i2)}
                                </p>
                            )
                        })}
                    </div>
                )    
            })}
        </div>
    );

}

但它没有做我想要的。我只获得了一个包含 9 个单元格的列，并且这些单元格是相同的对象。我不明白为什么。（我知道这是相同的对象，因为我在创建它们时分配了一个句柄函数 onClick ：

<Board 
     onClick={(i) => this.handleClick(i)} //handleClick just draws a X in the cell
     />

我同时让 X 淹没在 3 个单元格中

EDIT2：我找到了一个解决方案：

render(){   
    var index1 = this.fillMod3(Array(3));        

    return(
        <div>
            {index1.map((e,i) => {
                return(
                    <div key={i} className="board-row">
                        {this.renderSquare(e)}
                        {this.renderSquare(e+1)}
                        {this.renderSquare(e+2)}
                    </div>
                )    
            })}
        </div>
    );

}

}

但不是我想要的。即使对于实习生 renderSquare(i) 函数，我也想要另一个循环。