React组件映射到contentEditable元素，退格删除触发Node.removeChild错误如何解决？

算力阿峰

2026-10-2

解决方案

替换不合法的key值
你当前渲染MentionWrapper时用数组索引i作为key，删除元素后索引会错位，导致React虚拟DOM和真实DOM的节点匹配完全混乱。直接替换为每个mention唯一的标识字段即可：

<MentionWrapper
  key={obj.id} // 替换原来的key={i}
  displayName={obj.displayName}
  uid={obj.uid}
  id={obj.id}
/>

拦截退格键操作，避免原生直接修改DOM结构
这个错误的核心是用户手动按退格删除Mention时，原生DOM直接移除了对应节点，但React的虚拟DOM仍然记录该节点存在，重渲染时执行移除操作就会找不到节点。可以给contentEditable元素添加onKeyDown监听，拦截退格事件，自己控制mentions数组的更新：

<span
  contentEditable
  suppressContentEditableWarning={true}
  onKeyDown={(e) => {
    if (e.key === 'Backspace') {
      const selection = window.getSelection();
      if (selection?.anchorOffset === 0) {
        // 光标在最前面，判断前一个节点是否是MentionWrapper
        const prevNode = selection.anchorNode?.previousSibling;
        if (prevNode?.classList.contains('mention-wrapper')) { // 给MentionWrapper加个专属类名
          e.preventDefault();
          // 找到对应的mention索引，删除数组项
          const newMentions = [...mentions];
          newMentions.splice(对应索引, 1);
          setMentions(newMentions);
          return;
        }
      }
    }
  }}
  onInput={(e) => {
    setMsg(e.target.innerHTML);
  }}
>
  {/* 原有渲染逻辑 */}
</span>

用完全受控的结构化状态管理输入内容
彻底放弃直接读取innerHTML的做法，把整个输入的内容存为结构化数组，每个元素区分普通文本/mention对象，所有输入变更都先更新这个结构化数组，再由React统一渲染DOM，完全屏蔽原生对DOM结构的修改，从根源避免虚拟DOM和真实DOM不一致的问题。
快速临时规避方案
如果需要快速修复上线，可以给contentEditable的span绑定一个随mentions变化的key，让React每次mentions更新时直接重建整个元素，跳过diff流程：

<span
  key={`editable-${mentions.length}-${Date.now()}`} // 新增动态key
  contentEditable
  suppressContentEditableWarning={true}
  onInput={(e) => {
    setMsg(e.target.innerHTML);
  }}
>
  {/* 原有渲染逻辑 */}
</span>

这个方案会导致每次更新时输入框失去焦点，需要额外手动恢复光标位置，适合临时救急，不建议长期使用。

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