我在使用React时遇到了一点问题。我无法使用for循环创建嵌套组件。我的意图是创建一个9个单元格的表，并为每行创建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： 根据 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
/>
我同时在 3 个单元格中使 X 淹没。
编辑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>
);
}