React - 使用循环创建嵌套组件

Question

我对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:以下标记示例我应该可以做这样的事情

    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个单元格的列,单元格是相同的对象.我不明白为什么.(我知道这些是相同的对象,因为我在创建它们时会分配一个句柄函数:

<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)函数的另一个循环.

Answer 1

要在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>;

请注意,每次渲染组件数组时,都必须提供一个keyprop,如此处所示.

此外,如果您只想在渲染功能中打印行值,则应替换:

index.forEach(function(row){
    board.push(() => {
        return(
            <div>{row}</div>
        );
    });
})

有:

index.forEach( (row, index) => {
    board.push(<div key={index}>{row}</div>)
})

或者,然而,更换forEach和push使用map:

board = index.map( (row, index) => <div key={index}>{row}</div> )

编辑我使用您的代码作为基础创建了一个9x9板的小提琴:https://jsfiddle.net/mrlew/cLbyyL27/(您可以单击单元格来选择它)

Answer 2

我也看到您也在做JS React教程！这是我所做的，但是我正在努力，因为必须有一种很好的方法来提供每个单独的键。

我遇到了一个同样的问题，您遇到了将X绘制成3个正方形的情况，发生这种情况的原因是因为渲染正方形时，某些“ i”是重复的。因此，有多个Square，例如“ i”为2（至少在我的问题中就是这种情况）。

那么每个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）。这样，每个方块都有一个与之关联的唯一“ i”值。

设置完循环后，我使用此 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>
  );
}

Answer 3

这是我在阅读这里和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 Tutorial 中的挑战。=p