小编neb*_*uus的帖子

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

我对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>
    );        
}
Run Code Online (Sandbox Code Playgroud)

}

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

这是我的代码:

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>
            );
        }); …
Run Code Online (Sandbox Code Playgroud)

javascript loops inline jsx reactjs

10
推荐指数
3
解决办法
2万
查看次数

标签 统计

inline ×1

javascript ×1

jsx ×1

loops ×1

reactjs ×1