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

Question

赏金将在 8 小时后到期。 此问题的答案有资格获得+50声望赏金。 yalpsid eman正在从有信誉的来源寻找答案。

我有一个网页显示按钮列表和相应的 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 的实际代码是什么？

Answer 2

如果不查看您在哪里渲染 iFrame，很难看到这里发生了什么，但我会指出我认为您可能会找到所需内容的位置：

条件渲染： https://reactjs.org/docs/conditional-rendering.html

此外，您实际上可以在组件渲染中的数组上使用.map function，如下所示：

function Comp() {
    return (
        <div>
            {['TestVal1', 'TestVal2'].map((val) => {return (<p>{val}</p>)})}
        </div>
    )
}