我对React有点小问题.我无法使用for循环创建嵌套组件.我想要做的是创建一个表的9个单元格,然后为每一行创建3行,每行有3个单元格,然后将3行安装在一起,创建一个9×9的板.
假设我想得到这样的东西,但是使用循环
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,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能帮助我,我会非常感激.
抱歉我的英语不好
EDIT1：
以下marklew示例我应该可以做这样的事情
render(){
var index1 = this.fillN(Array(3)); //index1=[0,2]
var index2 = this.fillN(Array(3)); //index2=[0,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个单元格的列,单元格是相同的对象.我不明白为什么. (我明白这些是相同的对象,因为我在创建它们时会分配一个句柄函数：
<Board
onClick={(i) => this.handleClick(i)} //handleClick just draws a X in the cell
/>
我让X同时淹没在3个细胞中
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,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>;
请注意,每次渲染组件数组时,都必须提供一个关键道具,如here所示.
此外,如果您只想在渲染功能中打印行值,则应替换：
index.forEach(function(row){
board.push(() => {
return(
<div>{row}</div>
);
});
})
有：
index.forEach( (row,index) => {
board.push(<div key={index}>{row}</div>)
})
或者,替换forEach并使用map进行推送：
board = index.map( (row,index) => <div key={index}>{row}</div> )
编辑我使用您的代码作为基础创建了一个9×9板的小提琴：https://jsfiddle.net/mrlew/cLbyyL27/(您可以单击单元格来选择它)
