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