映射方法中的索引值不会保存到div的id

Question

我正在构建一个棋盘应用程序，目前正在尝试为每个方格分配一个与其在2d数组中的位置相关的唯一id。例如，boardInit中的第一个rook的id应为0，0。

​

let boardInit = [
  ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'],
  ['pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn'],
  [null, null, null, null, null, null, null, null],
  [null, null, null, null, null, null, null, null],
  [null, null, null, null, null, null, null, null],
  [null, null, null, null, null, null, null, null],
  ['pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn'],
  ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'],
];

const Board = () => {
  return (
    <div>
      <div className='board-cont'>
        {boardInit.map((row, x) => {
          return row.map((col, y) => {
            return (
              <div
                id={y + x}
                className='board-sqr'
                onClick={() => console.log(this.id)}
              >
                {col}
              </div>
            );
          });
        })}
      </div>
      <MoveMessage clicks={clickState} />
    </div>
  );
};

​

当我通过数组映射创建板时，x值和y值对位置都是正确的。我可以看到他们准确地显示，当我控制台登录出他们。但是，当我试图将id分配给这些值并对其进行控制台日志记录时，我会得到一个id未定义的错误。如何分配x和y值作为每个正方形的id？

Answer 1

我认为您遇到的问题是x + y正在执行x和y的数学加法。

return (
    <div>
      <div className="board-cont">
        {boardInit.map((row, x) => {
          return row.map((col, y) => {
            const id = `[${x},${y}]`

            return (
              <div
                id={id}
                className="board-sqr"
                onClick={() => console.log(id)}
              >
                {col}
              </div>
            );
          });
        })}
      </div>
    </div>
  );