javascript - 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>

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

我是 React 的新手，如果有人能帮助我，我将不胜感激。 抱歉我的英语不好

编辑1: 按照 ma​​rklew 示例，我应该能够做这样的事情

    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 个单元格中

编辑2: 我找到了解决方案:

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

请注意，每次渲染组件数组时，都必须提供一个 key 属性，如 here 所指出的那样.

此外，如果您只想在渲染函数中打印行值，您应该替换:

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 板的 fiddle :https://jsfiddle.net/mrlew/cLbyyL27/ (你可以点击单元格来选择它)