React中contentEditable组件报removeChild错误的解决咨询

问题根源 #

这段代码的核心问题是：contentEditable元素的真实DOM会被浏览器实时修改（比如输入文本时自动生成文本节点），但你通过条件渲染在空状态下输出<br>、有内容时输出<p>{text}</p>，导致React虚拟DOM和真实DOM的节点结构完全不匹配。当输入第一个字符时，React试图移除原来的<br>节点，但此时真实DOM里的节点已经被浏览器替换成了输入的文本节点，自然会触发removeChild找不到节点的错误。

解决方案 #

方案1：简化结构，避免节点类型切换（推荐）

直接把文本（或空状态占位符）放在contentEditable根节点里，不要切换节点类型，让React的虚拟DOM和真实DOM保持同步：

const [text, setText] = useState('');

const handleChange = e => {
  setText(e.target.textContent.trim())
}

<div
  contentEditable={true}
  onInput={handleChange}
  suppressContentEditableWarning
>
  {text || '\u00A0'} {/* 用不间断空格处理空状态，防止div塌陷 */}
</div>

方案2：固定容器节点，只更新内部内容

如果需要保留包裹结构，始终使用同一个容器节点，只修改内部内容，避免React尝试移除整个容器：

const [text, setText] = useState('');

const handleChange = e => {
  setText(e.target.textContent.trim())
}

<div
  contentEditable={true}
  onInput={handleChange}
  suppressContentEditableWarning
>
  <p>{text || <br />}</p>
</div>

方案3：直接操作DOM（复杂场景适用）

用useRef和dangerouslySetInnerHTML绕过React虚拟DOM的约束，直接控制contentEditable的内容：

import { useState, useRef } from 'react';

const inputRef = useRef(null);
const [text, setText] = useState('');

const handleChange = () => {
  if (inputRef.current) {
    setText(inputRef.current.textContent.trim());
  }
}

<div
  ref={inputRef}
  contentEditable={true}
  onInput={handleChange}
  suppressContentEditableWarning
  dangerouslySetInnerHTML={{ __html: text || '<br>' }}
></div>

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