【发布时间】：2017-05-30 18:11:12
【问题描述】：
我对 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>
我想澄清一下，我确信与该组件（板）交互的其余代码没有问题。
我是新手，如果有人可以帮助我，我会非常感激。 对不起我的英语不好
编辑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
/>
我把 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) 函数，我也想要另一个循环。
【问题讨论】：
标签： javascript loops reactjs inline jsx