Из туториала React: Перепишите Board, используя вложенные циклы для создания клеток, вместо их жёсткого кодирования

Question

Исходный код, который нужно преобразовать:

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

Что получилось у меня:

    const row = [[0,1,2],[3,4,5],[6,7,8]]

    return (
      <div>
        {row.map(
          item => <div className="board-row">
            {item.map(
              (square => this.renderSquare(square))
            )}
          </div>
        )}
      </div>
    )

renderSquare:

  renderSquare(i) {
    return (
      <Square
        inWinLine={this.props.winLine.includes(i)}
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

Вопрос: можно ли как-то оптимальнее решить эту задачу?

Смущает то, что первый массив просто захардкодил, но как решить по-другому не пойму что-то.

Спасибо

Answer 1

Например так:

const rows = 3;
const cells = 3;
return (
    <div>
        {[...Array(rows).keys()].map(row => (
            <div className="board-row" key={row}>
                {[...Array(cells).keys()].map(cell => this.renderSquare(row * cells + cell))}
            </div>
        ))}
    </div>
)

БЛОГ НА HUSL

Из туториала React: Перепишите Board, используя вложенные циклы для создания клеток, вместо их жёсткого кодирования

Ответы (1 шт):