React-使用循环创建嵌套组件 [英] React - Create nested components with loops
问题描述
我对React有一点问题.我无法使用for循环创建嵌套组件.我想做的是创建一个表的9个单元格，然后创建3行，每行3个单元格，然后将3行安装在一起并创建9x9的电路板.
I have a little issue with React. I can't create a nested component with a for loop. What I want to do is create 9 cells of a table and then create 3 rows with 3 cells for every row and after that mount the 3 rows together and create a board 9x9.
让我说我想得到这样的东西，但是要使用循环
Let say that I want to get something like this, but using a loop
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>
);
}
}
我搜索了几个小时的其他问题，我认为我的代码几乎是正确的，但没有呈现我想要的内容.我只会得到一个白页.
I searched others question for hours and I think my code is almost correct but it does not render what I want. I only get a white page.
这是我的代码:
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>
);
}
我总是在屏幕上看到这样的内容:
I always get on the screen something like this:
<Board>
<div> /*empty*/ </div>
</Board>
我想澄清一下，我确定该组件(板)与之交互的其余代码没有问题.
I want to clarify that I am sure that the rest of the code with which that component (Board) interacts has no issues.
我在反应方面是新手，如果Someoane可以帮助我，我将非常感激. 对不起，我的英语不好
I am new in react and if someoane can help me i will apreciate very much. Sorry for my poor English
在 marklew 示例之后，我应该可以执行以下操作
following marklew examples i should be able to do something like this
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:
but it doesn't do what I want. I obtain just a column with 9 cells and the cells are the same objects. I dont understand why. (I understand that are the same objects because i assign a handle function onClick when I create them like that:
<Board
onClick={(i) => this.handleClick(i)} //handleClick just draws a X in the cell
/>
我把X同时淹没在3个单元格中
and I get the X drown in 3 cells simultaneously
我找到了解决方案:
I reached a solution:
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)函数提供另一个循环.
but is not what I want. I want another loop even for the intern renderSquare(i) function.
推荐答案
要在JSX中呈现元素列表，您可以执行以下操作:
To render a list of elements inside JSX, you can do something like that:
render() {
return <div>
{
[1,2,3].map ( (n) => {
return this.renderSquare(n)
})
}
</div>;
}
只需将您的组件数组包装到JSX中的{}中即可.
Just wrap your array of components into {} in your JSX.
为了澄清一点，这与以下逻辑相同:
To clarify a bit, this is the same logic of:
return <div>
{
[
<h1 key="1">Hello 1</h1>,
<h1 key="2">Hello 2</h1>,
<h1 key="3">Hello 3</h1>
]
}
</div>;
请注意，每次渲染组件数组时，都必须提供key道具，如此处.
Note that everytime you render an array of components, you must provide a key prop, as pointed here.
此外，如果您只想在渲染函数中打印行值，则应替换:
Also, if you want simply print row value in your render function, you should replace:
index.forEach(function(row){
board.push(() => {
return(
<div>{row}</div>
);
});
})
具有:
index.forEach( (row, index) => {
board.push(<div key={index}>{row}</div>)
})
，或者用map替换forEach和push:
board = index.map( (row, index) => <div key={index}>{row}</div> )
编辑，我使用您的代码作为基础，使用9x9电路板创建了一个小提琴: https://jsfiddle.net/mrlew/cLbyyL27/(您可以单击该单元格将其选中)
EDIT I created a fiddle with a 9x9 board using your code as a base: https://jsfiddle.net/mrlew/cLbyyL27/ (you can click on the cell to select it)
这篇关于React-使用循环创建嵌套组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
