如何将已挂载的React组件通过Portal转移至另一组件？

核心思路 #

React Portal本质是在新DOM节点下挂载新的React组件实例，不符合需求。我们需要直接操作原生DOM，将已创建的iframe节点从Component A的容器移动到Component B的容器中——原生DOM的appendChild方法移动节点时不会销毁原实例，能完整保留iframe的运行状态（已加载页面、用户输入等）。同时要避免React接管iframe的渲染逻辑，防止React重新渲染时销毁原实例。

实现步骤与代码示例 #

1. 封装iframe全局管理工具 #

用一个简单的全局注册表维护iframe实例，支持跨组件访问和销毁：

// iframe-manager.js
const iframeRegistry = new Map();

export function registerIframe(id, iframeElement) {
  iframeRegistry.set(id, iframeElement);
}

export function getIframe(id) {
  return iframeRegistry.get(id);
}

export function destroyIframe(id) {
  const iframe = getIframe(id);
  if (iframe && iframe.parentNode) {
    iframe.parentNode.removeChild(iframe);
  }
  iframeRegistry.delete(id);
}

// 对应需求的getComponentProxy函数
export function getComponentProxy(componentId) {
  return {
    destroy: () => destroyIframe(componentId)
  };
}

2. Component A：初始化iframe并挂载 #

Component A负责手动创建iframe实例，挂载到自身容器，同时注册到全局管理器：

import { useRef, useEffect } from 'react';
import { registerIframe } from './iframe-manager';

const ComponentA = ({ iframeId }) => {
  const containerRef = useRef(null);
  const iframeRef = useRef(null);

  useEffect(() => {
    // 手动创建iframe，避开React渲染逻辑的干预
    const iframe = document.createElement('iframe');
    iframe.src = 'https://example.com';
    iframe.width = '100%';
    iframe.height = '400px';
    
    // 挂载到Component A的容器
    containerRef.current.appendChild(iframe);
    iframeRef.current = iframe;
    
    // 注册到全局管理器
    registerIframe(iframeId, iframe);

    // 组件卸载时的清理逻辑
    return () => {
      if (iframe.parentNode === containerRef.current) {
        containerRef.current.removeChild(iframe);
      }
    };
  }, [iframeId]);

  return (
    <div>
      <h3>Component A</h3>
      <div ref={containerRef} className="iframe-container"></div>
    </div>
  );
};

export default ComponentA;

3. Component B：提供容器并实现转移逻辑 #

Component B提供接收iframe的容器，通过全局管理器获取iframe实例并完成DOM移动：

import { useRef } from 'react';
import { getIframe } from './iframe-manager';

const ComponentB = ({ iframeId }) => {
  const containerRef = useRef(null);

  const transferIframe = () => {
    const iframe = getIframe(iframeId);
    if (iframe && containerRef.current) {
      // appendChild会自动将节点从原父容器移除并添加到新容器
      containerRef.current.appendChild(iframe);
    }
  };

  return (
    <div>
      <h3>Component B</h3>
      <button onClick={transferIframe}>从A转移iframe到B</button>
      <div ref={containerRef} className="iframe-container"></div>
    </div>
  );
};

export default ComponentB;

4. 父组件整合与测试 #

在父组件中传入统一的iframeId，整合两个组件并测试销毁功能：

import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
import { getComponentProxy } from './iframe-manager';

const ParentComponent = () => {
  const iframeId = 'my-shared-iframe';

  const handleDestroy = () => {
    getComponentProxy(iframeId).destroy();
  };

  return (
    <div>
      <ComponentA iframeId={iframeId} />
      <ComponentB iframeId={iframeId} />
      <button onClick={handleDestroy}>销毁iframe</button>
    </div>
  );
};

export default ParentComponent;

关键注意事项 #

• 禁止用React渲染iframe：如果在render中写<iframe>，React会在组件重渲染时销毁旧实例创建新的，必须手动创建并挂载DOM节点。
• DOM移动特性：原生appendChild移动节点时不会触发iframe重新加载或状态重置，完美满足状态持久化需求。
• 内存泄漏防范：组件卸载或销毁iframe时，必须移除DOM节点并清理全局注册。

验证方式 #

1. 在Component A的iframe中进行操作（比如输入表单内容、跳转到子页面）。
2. 点击Component B的转移按钮，确认iframe在B中保留之前的操作状态。
3. 点击销毁按钮，确认iframe从DOM中移除，无法再被转移使用。

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