如何向React创建的DOM层级插入自定义DOM节点且不被移除？

React在状态更新时会通过虚拟DOM比对重新渲染真实DOM，直接插入到React管理的DOM层级内的自定义节点，会因为React的重新渲染被清除。以下是几种可行的解决方案：

方案1：插入到React不管理的DOM容器 #

优先选择页面中不属于React组件树的静态DOM节点作为插入容器（比如<body>直接子元素、页面的静态头部/尾部容器等），这类区域不会被React的渲染逻辑影响，自定义节点能稳定存在。

// 找到非React管理的容器（示例为body）
const safeContainer = document.body;
// 创建自定义扩展节点
const extensionNode = document.createElement('div');
extensionNode.textContent = '我的浏览器扩展内容';
extensionNode.style.cssText = 'position: fixed; bottom: 20px; right: 20px; padding: 10px; background: #333; color: #fff;';
// 插入到安全容器
safeContainer.appendChild(extensionNode);

方案2：用MutationObserver监听DOM变化并自动恢复 #

如果必须插入到React管理的DOM区域，可通过MutationObserver监听目标容器的DOM变化，当自定义节点被移除时自动重新插入。

// 目标容器（React管理的节点，需根据实际网站DOM结构调整选择器）
const targetContainer = document.querySelector('.react-component-container');
// 创建自定义节点并设置唯一标识
const customNode = document.createElement('div');
customNode.id = 'extension-custom-node';
customNode.textContent = '嵌入React组件内的扩展内容';

// 插入节点的通用函数
function insertCustomNode() {
  if (!document.getElementById('extension-custom-node')) {
    targetContainer.appendChild(customNode);
  }
}

// 首次插入
insertCustomNode();

// 初始化DOM变化监听
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否有自定义节点被移除
    const isNodeRemoved = Array.from(mutation.removedNodes).some(node => node.id === 'extension-custom-node');
    if (isNodeRemoved) {
      insertCustomNode();
    }
  });
});

// 配置监听范围：仅监听目标容器的子节点变化
observer.observe(targetContainer, { childList: true });

方案3：利用React Portal挂载（需网站暴露React环境） #

如果能访问到网站全局的React和ReactDOM对象，可以用React Portal将自定义节点挂载到React虚拟DOM中，同时渲染到指定位置，避免被React的重渲染清除。

// 假设网站全局存在React和ReactDOM对象
const { createElement } = React;
const { createPortal } = ReactDOM;

// 创建扩展组件
const ExtensionContent = createElement('div', { id: 'extension-portal-node' }, '基于Portal的扩展内容');

// 找到React根容器
const reactRoot = document.getElementById('react-root');
// 通过Portal将组件渲染到目标位置（示例为body），但属于React虚拟DOM的一部分
createPortal(ExtensionContent, reactRoot);

注意事项 #

• 优先使用方案1，无需监听DOM变化，性能和稳定性最优；
• 方案2的MutationObserver需缩小监听范围，避免监听不必要的DOM变化，减少性能消耗；
• 方案3依赖网站暴露React环境，兼容性最差，仅适用于特定场景。

内容的提问来源于stack exchange，提问作者major-mann