路径规划可视化工具重置后HTML元素类名未更新问题咨询

核心问题出在：你直接手动修改DOM元素的className来实现节点样式变化，而React的重渲染机制不会主动覆盖这种手动修改的真实DOM属性——这确实是你对React重渲染逻辑的误解。

问题根源 #

• React基于虚拟DOM做更新：重渲染时会对比组件的虚拟DOM与真实DOM的差异，只更新有变化的部分。你手动修改了真实DOM的className，但你的Node组件在虚拟DOM里的className属性始终是固定的"node "，React会判定这个属性没有变化，因此不会覆盖你手动修改的真实DOM值。
• 组件复用问题：你用rowIdx和nodeIdx作为Node组件的key，当网格结构不变时，React会复用已存在的组件实例，不会重新创建新的DOM节点，这也导致之前修改的className被保留。

正确解决方案：用状态驱动视图（避免直接操作DOM） #

React的核心是数据驱动视图，应该把节点的状态（是否被访问、是否是最短路径等）存在组件状态中，通过状态动态控制className，而不是直接修改DOM。

1. 扩展网格节点的数据结构

在initGraph函数中给每个节点添加状态字段，用来标记节点的状态：

function initGraph() {
  return {
    grid: Array(18).fill().map((_, row) => 
      Array(37).fill().map((_, col) => ({
        row,
        col,
        isStart: row === 0 && col === 0,
        isFinish: row === 17 && col === 36,
        isVisited: false, // 标记是否被访问
        isShortest: false // 标记是否是最短路径节点
      }))
    )
  };
}

2. 动态生成Node组件的className

修改渲染逻辑，根据节点的状态动态拼接className：

<Node
  key={`${rowIdx}-${nodeIdx}`} // 改用行列组合作为唯一key，避免组件复用导致的状态残留
  row={node.row}
  col={node.col}
  isStart={node.isStart}
  isFinish={node.isFinish}
  onClick={handleOnClickNode}
  className={`node ${node.isVisited ? 'visited' : ''} ${node.isShortest ? 'shortest' : ''}`}
/>

3. 替换DOM操作：通过更新状态修改样式

把之前手动修改DOM的代码，改成更新grid状态的逻辑。比如标记最短路径节点：

const markShortestPath = (path) => {
  const newGrid = [...grid.grid];
  path.forEach(([row, col]) => {
    newGrid[row][col] = {...newGrid[row][col], isShortest: true};
  });
  setGrid({...grid, grid: newGrid});
};

// 标记已访问节点的逻辑同理：
const markVisitedNode = (row, col) => {
  const newGrid = [...grid.grid];
  newGrid[row][col] = {...newGrid[row][col], isVisited: true};
  setGrid({...grid, grid: newGrid});
};

4. 简化重置逻辑

此时重置画布只需要重新初始化网格即可，所有节点状态都会被重置，重渲染时会自动生成初始的className：

const resetBoard = () => {
  setGrid(initGraph());
  // 如果startNode和endNode是单独维护的状态，也可以同步重置，建议把它们合并到grid中，保持状态统一
};

额外建议 #

把startNode和endNode的状态也合并到grid对象中，避免多个状态源导致的不一致，这样整个逻辑会更简洁，也能减少潜在的bug。

内容的提问来源于stack exchange，提问作者Vedank Pande