用循环创建嵌套组件
我对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）与之交互的其他代码没有问题。
我是新的反应，如果someoane可以帮助我，我会非常赞赏。 对不起，我英文很差
编辑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.
EDIT2：我达成了一个解决方案：
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）函数，我也想要另一个循环。
为了呈现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支柱，如此处所指出的。
另外，如果您只需在渲染函数中打印行值，则应替换：
index.forEach(function(row){
board.push(() => {
return(
<div>{row}</div>
);
});
})
有：
index.forEach( (row, index) => {
board.push(<div key={index}>{row}</div>)
})
或者，然后，替换forEach并用map push ：
board = index.map( (row, index) => <div key={index}>{row}</div> )
编辑我创建了一个9x9板使用您的代码作为基地的小提琴：https：//jsfiddle.net/mrlew/cLbyyL27/（您可以单击单元格以选择它）
我看到你也在做JS React教程！ 以下是我所做的，但是我正在研究这个问题，因为必须有一个很好的方法来给每个这些个别密钥。
我遇到了同样的问题，你遇到了X被绘制成3格的原因，这是因为当你渲染正方形时，一些“我”被复制。 因此，有多个以“i”为2的Square（至少在我的问题中是这样）。
所以每个Square都有一个索引权？ [0,1,2,3,4,5,6,7,8]。
首先，我们需要找到这些相关的方式，以便我们可以将它们呈现为行！ 所以，在你的例子中，你有index1和index2，我假设它将引用板中Square的x和y坐标。 重写上述数组：[{0,0}，{1,0}，{2,0}，{0,1}，{1,1}，{2,1}，{0， 2}，{1,2}，{2,2}]使用{x，y}格式。 我们如何使用这些值（我们将从您的index1和index2中获得这些值，以获得以[0,1,2,3,4,5,6,7,8]开头的原始值数组？
我做的是3 * x + y（或在一个循环中，3 * i + j）。 这样每个广场都有一个独特的“我”值与它相关联。
在设置我的循环后，我使用这个SO帖子来正确地返回我从一个单独的函数创建的元素（为了保持我的代码更清晰）。
这是我结束了，但我需要确保正确设置键，这实际上是我偶然发现这个帖子：
createSquares() {
let rows = [];
for(var i = 0; i < 3; i++){
let squares = [];
for(var j = 0; j < 3; j++){
squares.push(this.renderSquare(3*i+j));
}
rows.push(<div className="board-row">{squares}</div>);
}
return rows;
}
然后我在Board中的渲染功能如下所示：
render() {
return (
<div>
{this.createSquares()}
</div>
);
}
在阅读这里和React JSX中的Loop之后，这里是我能想到的最好的：
render() {
return (
<div>
{
[...Array(3)].map((_, i) => (
<div key={i} className="board-row">
{
[...Array(3)].map((_, j) => this.renderSquare(3 * i + j))
}
</div>
))
}
</div>
);
}
PS我也在做新的React教程中的挑战。 = p
链接地址: http://www.djcxy.com/p/52053.html