如何在 React 组件中插入使用 js 创建的 iframe

Posted 2023-03-05

【中文标题】如何在 React 组件中插入使用 js 创建的 iframe

【英文标题】：How to insert iframe created using js in a React component

【发布时间】：2021-12-15 06:40:25

【问题描述】：

我正在尝试使用 iframe 构建应用。它将有控制器来更改 iframe 样式并向其添加文本。 iframe 就像预览一样。我想用 javascript 创建 iframe。我尝试这样创建元素并将其附加到组件返回 div，如下所示：

let iframe = document.createElement('iframe');
document.querySelector('#iframeContainer').appendChild(iframe);

我收到此错误：TypeError: Cannot read properties of null (reading 'appendChild')

我也尝试了另一种方法：

let iframe = React.createElement('iframe', ); 
ReactDOM.render(
  iframe, document.getElementById('root')
);

在这个方法中，因为我没有返回值，所以会抛出错误。我无法将其插入组件中。

我应该如何解决这个问题？我对所有想法持开放态度。

【参考方案1】：

我找到了解决这个问题的方法。当我尝试附加元素时，我错过了组件生命周期。在这里花了很多时间之后是我的解决方案：

const createIframe = () => 
const iframe = document.createElement('iframe'); 
document.getElementById('iframeContainer').appendChild(iframe);


useEffect(() => 
    createIframe();
  );

通过在 useEffect 中调用我的函数，我确保创建了我想要附加 chil 的 div。我使用了 useEffect 但如果您使用的是类组件，则应该使用 componenDidMount()