javascript - 将组件保存到列表中，然后有条件地渲染

Question

我有一个显示按钮列表和相应 iframe 组件的网页。每次单击新按钮时，都会显示一个新的 iframe，并删除现有的 iframe。
这是 iframe 组件:

const IframeComp = ({ button }) => {

    return (
      <iframe src={button}></iframe>
    )
  }

export default IframeComp

我正在将所有可能的 iframe(作为字符串)加载到 app.jsx 中的列表中当应用程序像这样加载时:

  const [iframeComponents, setIframeComponents] = useState()
  useEffect(() => {
    function loadIframes() {
      let iframes = {}
      for (const iframeUrl of constants.buttonUrls) {
        const iframe = `<IframeComp button=${iframeUrl}></IframeComp>`
        iframes[iframeUrl] = iframe
      }
      setIframeComponents(iframes)
    }
    loadIframes()
  }, []);

并通过 iframeComponents到 iframe 显示页面文件，该文件检查按下哪个按钮并呈现适当的 iframe。
当然，iframe 现在正在呈现为字符串。 有没有办法将 app.jsx 中的这些 IframeComp 组件加载/渲染为实际组件/html，将它们存储在列表中，然后根据按钮单击在下游简单地显示它们？
或者，我尝试使用 html-react-parser库以在 iframe 显示页面文件中将字符串简单地呈现为 html，但这不起作用，因为它将字符串小写，并且它们还必须花费时间来呈现每个按钮单击。

Answer 1

为什么不直接使用组件？

const [iframeComponents, setIframeComponents] = useState();

useEffect(() => {
  function loadIframes() {
    let iframes = {};
    for (const iframeUrl of constants.buttonUrls) {
      const iframe = <IframeComp button={iframeUrl}></IframeComp>;
      iframes[iframeUrl] = iframe;
    }
    setIframeComponents(iframes);
  }
  loadIframes();
}, []);

您通过按钮更改 iframe 的实际代码是什么？