React map函数渲染时如何动态修改特定项的CSS样式

答复 #

首先明确：不建议、也没法直接通过React的key属性查找对应DOM修改样式。key是React内部做虚拟DOM差异对比的保留属性，不会被渲染成真实DOM上的属性，靠key硬查DOM属于反模式，后续组件重渲染时手动改的样式会被直接覆盖，很容易出现样式错乱。

你现在要做的选中棋子后高亮可移动位置的效果，完全不需要手动操作DOM，顺着React状态驱动渲染的逻辑实现成本最低，也最稳定：

• 你代码里已经用board.select存了当前选中的棋子，只需要在选中状态变化时，计算出该棋子所有合法可落子的格子标识（也就是你给格子div当key用的square[0]），存到Set结构里方便快速匹配。
• 渲染每个格子时，判断当前格子是否属于可落子范围，是的话给格子追加一个专属的提示类名，在CSS里给这个类写好阴影/高亮样式即可，状态变化时类名会自动更新，样式也会同步切换。

你现有代码修改后的参考实现如下：

// 依赖选中棋子、棋盘状态自动计算可落子位置集合
const validMoveSet = useMemo(() => {
  if (!board.select) return new Set();
  // 替换成你自己的棋子合法走法计算逻辑，返回所有可落子格子的square[0]集合
  return calculateValidMoves(board.select, board);
}, [board.select, board]);

<div className='board'>
  {rows.map((row) => (
    <div key={row} className='row'>
      {row.map((square) => (
        <div 
          key={square[0]} 
          // 可落子格子追加move-hint提示类名
          className={`square ${validMoveSet.has(square[0]) ? 'move-hint' : ''}`}
          onClick={() => {
            board.select !== null &&
            checkColour(board.select[1]) !== checkColour(square[1]) && dispatch(move(square))
          }}
        >
          {isNaN(square[1]) && <img 
            src={square[1]} 
            alt={square[1]}
            onClick={() => { board.turns === checkColour(square[1]) && dispatch(select(square)) }}
            className={board.select === square ? 'piece-selected' : 'piece'} 
          />}
        </div>
      ))}
    </div>
  ))}
</div>

对应补充CSS样式即可实现你要的阴影提示效果：

.move-hint {
  /* 可根据需求调整阴影样式，比如用内阴影做落子提示 */
  box-shadow: inset 0 0 0 3px rgba(40, 167, 69, 0.7);
  cursor: pointer;
}

如果确实有特殊场景需要获取格子的真实DOM节点，也不要靠key遍历查找，可以维护一个键为格子标识、值为React ref的Map，渲染每个格子时把ref挂载到对应节点上，需要操作DOM时直接通过格子标识从Map里取对应ref即可，可靠性远高于手动查DOM。

内容的提问来源于stack exchange，提问作者David Ho