React组件剥离到新窗口后自定义元素无法渲染求助

问题根源 #

你的代码未在新窗口中创建有效的React挂载节点，也没正确关联React的渲染上下文，导致组件无法渲染。

具体修复方案 #

• 创建新窗口的挂载容器
  打开新窗口后，立即在其document中添加一个用于挂载React组件的div节点：

  const newWindow = window.open("", "", "width=800,height=600");
  if (!newWindow) return;
  // 生成挂载节点并添加到新窗口body
  const mountNode = newWindow.document.createElement("div");
  newWindow.document.body.appendChild(mountNode);
  

• 用createPortal实现跨窗口渲染
  放弃旧版的ReactDOM.render，改用createPortal将组件渲染到新窗口的挂载节点上，这样组件能保留和主应用的状态连接：

  import { useState } from 'react';
  import { createPortal } from 'react-dom';
  
  function Detachable({ children }) {
    const [mountNode, setMountNode] = useState<HTMLElement | null>(null);
    const [externalWindow, setExternalWindow] = useState<Window | null>(null);
  
    const handleDetach = () => {
      const win = window.open("", "", "width=800,height=600");
      if (!win) return;
      const node = win.document.createElement("div");
      win.document.body.appendChild(node);
      setMountNode(node);
      setExternalWindow(win);
  
      // 窗口关闭时清理状态
      win.addEventListener("unload", () => {
        setMountNode(null);
        setExternalWindow(null);
      });
    };
  
    return (
      <>
        <button onClick={handleDetach}>剥离到新窗口</button>
        {/* 存在挂载节点时渲染到新窗口，否则渲染在原位置 */}
        {mountNode ? createPortal(children, mountNode) : children}
      </>
    );
  }
  

• 清理资源防止内存泄漏
  必须监听新窗口的unload事件，在窗口关闭时重置挂载节点和窗口引用，避免React持有无效DOM引用。

核心说明 #

createPortal是React官方推荐的跨DOM树渲染方案，它让组件在新窗口渲染的同时，仍属于主应用的React上下文，状态更新、事件回调都能和主应用正常同步，完全满足你一边编辑代码一边在投影窗口展示模拟的需求。

内容的提问来源于stack exchange，提问作者Tomáš Buchta