React项目中为何无法通过forwardRef直接操作DOM节点？

核心报错原因 #

• 你的forwardRef实现本身没有问题：DevTools中的forwardRef标识、打印ref对象时能看到内部正确关联对应单元格，都证明ref的绑定链路是通的。
• 报错根源是混淆了React ref封装对象与真实DOM节点的层级：
  • React.createRef()生成的每个条目，本质是React内部维护的{ current: 挂载目标 }结构的普通对象，并非DOM元素本身。你打印时看到的“对应单元格”，其实是这个对象内部current属性指向的真实div，而不是ref对象本身。
  • React对createRef返回的对象做了不可扩展的冻结处理，直接在这个被冻结的对象上新增className、bgColor等自定义属性，就会触发TypeError: Cannot add property className, object is not extensible报错。

修正步骤 #

• 操作DOM属性时，必须先通过.current访问到真实挂载的DOM节点：
  原错误代码：
  refCollection.current[y][x].className = 'traversed';
  修正为：
  refCollection.current[y][x].current.className = 'traversed';
• 补充防护逻辑，避免网格未完全挂载时出现空引用错误：

  const targetNode = refCollection.current[y][x].current;
  if (targetNode) {
    targetNode.className = 'traversed';
    // 若需要修改背景色，通过style属性操作，避免直接使用无效的bgColor属性
    // targetNode.style.backgroundColor = 'your-color';
  }
  

额外优化建议 #

• 对尺寸固定的网格矩阵，嵌套React.createRef()的初始化方式没有问题，但不要在ref封装对象上做任何自定义属性挂载，所有DOM操作都要落到.current指向的真实元素上。
• 因为网格单元格数量多，直接操作DOM的动画方案是合理的，可以避开大量state更新带来的渲染性能损耗，后续动画执行时可以把定时器句柄存到ref中，避免组件卸载后还在操作已销毁的DOM节点。

内容的提问来源于stack exchange，提问作者Alex T.