javascript - 有没有更好的方法来遍历 React 渲染部分中的数据？

Question

我正在寻找循环数据、调用函数并返回结果，以便它们可以发布在 React 的渲染部分。我是该语言的新手，并试图在 React 主教程中实现一个额外的功能。

我正在尝试使渲染部分如下所示：

    <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>

任务是使用两个循环来创建上述结构。这是我的代码：

  const board = [0, 1, 2].map((num) => {

    const row = Array(3);
    for (let i of [0, 1, 2]) {
      row[i] = this.renderSquare(num*3 + i);
    }

    const board_row = row.map(num2 => {
      return (
        num2
      )
    })

    return (
      <div className="board-row">
        {board_row}
      </div>
    );
  });

我认为该board_row变量是浪费的，因为它执行整个映射操作只是为了正确格式化该行。当我尝试将 for 循环移动到 map 操作中时，我找不到传递num给 map 操作的方法。

  const board = [0, 1, 2].map((num) => {

    const board_row = [0, 1, 2].map(num2 => {
      // How do I get num here?
      return this.renderSquare(num*3 + num2);
    })

    return (
      <div className="board-row">
        {board_row}
      </div>
    );
  });

我该如何正确地做到这一点？

标签： javascriptreactjs

Answer 1

您可以这样做，因为您不能在下一次迭代之前打开标签

return (
    <div>
      {
        [0,3,6].map(num => (
            <div className="board-row">
              {
                Array(3).fill().map(
                  (_, index) => this.renderSquare(index + num)
                )
              }
            </div>
          ))
      }
    </div>
  );