React中如何在应用其他区域复用同状态的iframe？

完全可行，你之前用条件渲染的思路之所以会导致iframe重新加载，是因为条件渲染会在状态切换时卸载并重新挂载iframe组件，自然会丢失所有交互状态。下面是直接复用同一个iframe、保留筛选条件且不重新加载的具体实现方案：

核心思路：避免卸载iframe，用CSS控制显示/隐藏与位置切换 #

不要通过条件渲染（比如{showModal && <Iframe />}）来控制iframe的出现，而是让iframe始终保持在DOM中，仅通过CSS类切换它在「正常容器」和「全屏弹窗」之间的位置与显示状态——这样iframe不会被卸载，所有已设置的筛选条件、交互状态都会完整保留，也不会触发重新加载。

具体实现步骤 #

1. 封装基础iframe组件 #

先写一个独立的iframe组件，不要在这里做任何条件判断，只负责渲染BI仪表盘：

const BiDashboardIframe = ({ className }) => {
  return (
    <iframe
      src="你的BI仪表盘地址"
      className={className}
      frameBorder="0"
      width="100%"
      height="100%"
    />
  );
};

2. 父组件中控制iframe的展示状态 #

用状态控制弹窗的开关，通过动态类名切换iframe的容器样式：

import { useState } from 'react';
import './BiDashboard.css';

const BiDashboard = () => {
  const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);

  return (
    <div>
      {/* 正常视图下的容器 */}
      <div className={`normal-container ${isFullscreenOpen ? 'hidden' : ''}`}>
        <BiDashboardIframe />
        <button onClick={() => setIsFullscreenOpen(true)}>全屏查看</button>
      </div>

      {/* 全屏弹窗容器，始终渲染，用类控制显示 */}
      <div className={`fullscreen-modal ${isFullscreenOpen ? 'active' : ''}`}>
        <BiDashboardIframe />
        <button onClick={() => setIsFullscreenOpen(false)}>退出全屏</button>
      </div>
    </div>
  );
};

3. 编写CSS样式控制容器状态 #

通过CSS实现容器的显示隐藏、全屏布局：

.normal-container {
  width: 800px;
  height: 600px;
  margin: 20px auto;
}

.hidden {
  display: none;
}

.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: none;
  z-index: 9999;
}

.fullscreen-modal.active {
  display: block;
}

额外注意事项 #

• 确保iframe的src属性不会在状态切换时被修改，否则会强制触发重新加载
• 如果BI仪表盘存在跨域限制，需要提前和BI服务端沟通配置跨域允许规则，避免交互功能异常
• 若需要调整iframe在弹窗中的尺寸或样式，直接通过动态类名传递即可，无需重新渲染组件

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