如何在dangerouslySetInnerHTML渲染的HTML中嵌入React及相关疑问

问题1：能否通过根节点的render方法替换dangerouslySetInnerHTML生成的内容？ #

React.createRoot创建的根实例，其render方法只能操作它最初挂载的真实DOM节点，无法直接“嵌套调用”去替换组件内部dangerouslySetInnerHTML生成的DOM内容。

但如果你能从dangerouslySetInnerHTML插入的HTML中，获取到某个具体的真实DOM元素（比如给它加个id，用document.getElementById获取），可以在这个元素上新建一个独立的React根实例，然后调用这个新根的render方法渲染内容。这种方式下，新根和原应用的React树完全独立，各自管理自己的状态和生命周期，不属于“嵌套调用原根的render”。

示例代码：

// 主组件插入带容器的静态HTML
function MainContainer() {
  return (
    <div dangerouslySetInnerHTML={{ __html: '<div id="nested-root"></div>' }} />
  );
}

// 组件挂载后创建独立根渲染内容
useEffect(() => {
  const nestedRootEl = document.getElementById('nested-root');
  if (nestedRootEl) {
    const root = React.createRoot(nestedRootEl);
    root.render(<MyNestedComponent />);
  }
}, []);

问题2：能否在dangerouslySetInnerHTML的HTML中嵌套React组件并关联主应用生命周期？ #

直接在dangerouslySetInnerHTML的HTML字符串里写React组件标签是行不通的——React会把这些标签当成普通未知HTML标签解析，不会识别为React组件，自然无法关联主应用的React树生命周期。

如果需要在静态HTML内容中嵌入React组件，有两种可行方案：

• 拆分内容，用React拼接：把静态HTML拆分成多个片段，在片段之间插入React组件，比如：

  function MixedContent() {
    return (
      <div>
        <div dangerouslySetInnerHTML={{ __html: '<p>静态HTML内容片段</p>' }} />
        <MyReactComponent />
        <div dangerouslySetInnerHTML={{ __html: '<p>另一部分静态内容</p>' }} />
      </div>
    );
  }
  

• 使用React Portal：如果静态HTML已插入DOM，可通过Portal把React组件挂载到静态HTML内的指定节点上。这种方式下，组件属于主应用的React树，会跟随主树的生命周期更新，仅DOM位置在静态HTML内部：

  function PortalInStaticHTML() {
    const [portalEl, setPortalEl] = useState(null);
  
    useEffect(() => {
      setPortalEl(document.getElementById('portal-target'));
    }, []);
  
    return (
      <div dangerouslySetInnerHTML={{ __html: '<div id="portal-target"></div>' }}>
        {portalEl && ReactDOM.createPortal(<MyReactComponent />, portalEl)}
      </div>
    );
  }
  

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