React中如何预存Iframe组件实例并根据按钮点击条件渲染

解决方案 #

核心逻辑是直接存储React元素实例，不要拼接组件字符串，React本身支持直接渲染预先生成的组件实例，不需要额外转义或解析。

第一步：修改app.jsx预生成逻辑 #

直接生成真实的IframeComp组件实例存入对象，不要拼接HTML字符串：

import IframeComp from './IframeComp'
import { useState, useEffect } from 'react'
import constants from './你的常量文件路径'

const App = () => {
  const [iframeComponents, setIframeComponents] = useState({})
  useEffect(() => {
    function loadIframes() {
      const iframes = {}
      for (const iframeUrl of constants.buttonUrls) {
        // 直接生成React元素，存储到对象中
        iframes[iframeUrl] = <IframeComp key={iframeUrl} button={iframeUrl} />
      }
      setIframeComponents(iframes)
    }
    loadIframes()
  }, []);

  // 后续把iframeComponents传递给子页面即可
  // ...其他逻辑
}

第二步：按钮点击渲染逻辑 #

子页面拿到iframeComponents后，点击按钮时直接取对应URL的实例渲染即可：

// 假设当前激活的按钮对应URL存在activeUrl state中
const IframeShowPage = ({ iframeComponents }) => {
  const [activeUrl, setActiveUrl] = useState('')

  return (
    <div>
      {/* 按钮列表逻辑，点击时setActiveUrl为对应url */}
      {/* ...按钮代码 */}

      {/* 渲染对应iframe */}
      <div className="iframe-wrap">
        {activeUrl && iframeComponents[activeUrl]}
      </div>
    </div>
  )
}

可选优化：预加载iframe内容 #

如果要完全消除切换时的加载等待，可以把所有iframe提前挂载到DOM，用CSS控制显隐，适合iframe数量不多的场景：

<div className="iframe-wrap">
  {Object.entries(iframeComponents).map(([url, comp]) => (
    <div 
      key={url} 
      style={{ display: activeUrl === url ? 'block' : 'none' }}
    >
      {comp}
    </div>
  ))}
</div>

原方案问题说明 #

你之前拼接组件字符串的方式不符合React的渲染逻辑：React默认会把字符串当成普通文本渲染，不会解析为组件；第三方HTML解析库只能识别标准HTML标签，无法解析自定义React组件，自然会出现标签转小写、组件不生效的问题。

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