React中dangerouslySetInnerHTML引发状态变更时的‘not a child’错误排查

这个问题我之前在迁移旧项目到React时也碰到过，核心矛盾在于React的虚拟DOM机制和dangerouslySetInnerHTML的直接DOM操作之间的不一致。

为什么会出现DOM层级损坏？ #

React的虚拟DOM是它管理DOM的核心：它会维护一份页面结构的快照，每次更新时通过对比虚拟DOM的差异来操作真实DOM。但当你使用dangerouslySetInnerHTML时，相当于直接绕过React的管控，把解析后的HTML字符串直接插入到真实DOM中——React的虚拟DOM只会记录那个包裹的<span>节点，完全不知道里面新增的子元素（就是你BBCode解析出来的内容）。

当你要移除这个<span>或者修改它的相邻节点时，React会基于它的虚拟DOM快照去定位真实DOM节点，但此时真实DOM的结构已经因为innerHTML的插入变得复杂了。React预期的是一个单纯的<span>，但真实DOM里的<span>已经有了一堆子节点，这就导致React在执行插入/移除操作时找不到它预期的节点位置，从而抛出那些"节点不是当前元素的子节点"的错误。

可行的解决方案 #

1. 分阶段更新（你提到的思路完全可行）

先清空dangerouslySetInnerHTML的内容，让React同步虚拟DOM和真实DOM，再执行移除/修改操作。这样能确保React操作DOM时，结构和它的虚拟DOM快照一致。

举个具体的代码例子，用useState和useEffect来实现：

import { useState, useEffect } from 'react';

const BBCodeRenderer = ({ content, onRemove }) => {
  const [parsedHtml, setParsedHtml] = useState(parseBBCodeToHtml(content));
  const [isRemoving, setIsRemoving] = useState(false);

  // 当parsedHtml清空后，触发移除操作
  useEffect(() => {
    if (parsedHtml === '' && isRemoving) {
      onRemove();
    }
  }, [parsedHtml, isRemoving, onRemove]);

  const handleRemove = () => {
    // 第一步：清空innerHTML，让React同步真实DOM
    setParsedHtml('');
    setIsRemoving(true);
  };

  return (
    <div>
      <span dangerouslySetInnerHTML={{ __html: parsedHtml }} />
      <button onClick={handleRemove}>删除内容</button>
    </div>
  );
};

// 假设你现有的BBCode转HTML函数
const parseBBCodeToHtml = (content) => {
  // 你的解析逻辑，比如把[b]转成<strong>等
  return content.replace(/\[b\](.*?)\[\/b\]/g, '<strong>$1</strong>');
};

这个流程里，先把innerHTML设为空，React会重新渲染并清空真实DOM里的子节点，此时虚拟DOM和真实DOM一致了，再执行移除操作就不会报错。

2. 彻底规避dangerouslySetInnerHTML（更推荐）

既然问题根源是绕过了React的虚拟DOM，那最好的解决办法就是让React完全管控所有节点——把BBCode直接解析成React元素，而不是HTML字符串。

比如你可以自己写一个简单的解析函数，或者找一个支持输出React元素的BBCode解析库。举个简化的例子：

import { useState } from 'react';

const BBCodeToReact = ({ content }) => {
  // 把BBCode标签转换成对应的React元素
  const parseContent = () => {
    const parts = content.split(/(\[b\]|\[\/b\]|\[i\]|\[\/i\])/);
    let currentStyle = [];
    return parts.map((part, index) => {
      switch (part) {
        case '[b]':
          currentStyle.push('bold');
          return null;
        case '[/b]':
          currentStyle.pop();
          return null;
        case '[i]':
          currentStyle.push('italic');
          return null;
        case '[/i]':
          currentStyle.pop();
          return null;
        default:
          if (currentStyle.includes('bold') && currentStyle.includes('italic')) {
            return <strong key={index}><em>{part}</em></strong>;
          } else if (currentStyle.includes('bold')) {
            return <strong key={index}>{part}</strong>;
          } else if (currentStyle.includes('italic')) {
            return <em key={index}>{part}</em>;
          } else {
            return <span key={index}>{part}</span>;
          }
      }
    });
  };

  return <div>{parseContent()}</div>;
};

// 使用方式
const App = () => {
  const [showContent, setShowContent] = useState(true);
  return (
    <div>
      {showContent && <BBCodeToReact content="[b]Hello[/b] [i]World[/i]" />}
      <button onClick={() => setShowContent(false)}>删除内容</button>
    </div>
  );
};

这种方式下，所有节点都是React创建和管理的，虚拟DOM和真实DOM完全同步，不管是移除还是修改相邻节点，都不会出现DOM层级损坏的问题，还能避免dangerouslySetInnerHTML带来的XSS风险。

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