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

Posted 2023-03-05

【中文标题】将组件保存到列表中，然后有条件地渲染

【英文标题】：Save components to a list and then conditionally render

【发布时间】：2022-01-03 04:41:33

【问题描述】：

我有一个显示按钮列表和相应 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，但这不起作用，因为它将字符串小写，而且它们还必须花时间来呈现每次点击按钮。

【问题讨论】：

我不确定你的 iframe 页面上有什么，但为什么要急切地加载它们呢？这似乎是一种性能反模式：用户能否以如此快的速度与他们进行真实的交互，以至于一次加载一个（或几个）不是更好的模式？另外，用户会使用每一帧吗？如果不是，那么加载它们是否会浪费它们的带宽？

能否提供渲染iframeComponents的代码

【参考方案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 的实际代码是什么？

【参考方案2】：

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

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

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

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