React-使用循环创建嵌套组件

Question

我对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>

我想澄清一下，我确定该组件（板）与之交互的其余代码没有问题。

我是反应新手，如果someoane可以帮助我，我将非常感激。对不起，我英语不好

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）函数提供另一个循环。

Answer 1

要在JSX中呈现元素列表，您可以执行以下操作：

render() {
    return <div>
        {
            [1,2,3].map ( (n) => {
                return this.renderSquare(n)
            })

        }
    </div>;
}

只需将您的组件数组包装到{}JSX中即可。

为了澄清一点，这是相同的逻辑：

return <div>
    {
        [
            <h1 key="1">Hello 1</h1>,
            <h1 key="2">Hello 2</h1>,
            <h1 key="3">Hello 3</h1>
        ]           
    }
</div>;

请注意，每次渲染组件数组时，都必须提供一个keyprop，如此处所示。

另外，如果只想在渲染函数中打印行值，则应替换：

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

与：

index.forEach( (row, index) => {
    board.push(<div key={index}>{row}</div>)
})

或者，然而，更换forEach和push使用map：

board = index.map( (row, index) => <div key={index}>{row}</div> )

编辑 我使用您的代码作为基础用9x9板创建了一个提琴：https :
//jsfiddle.net/mrlew/cLbyyL27/（您可以单击单元格将其选中）