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

Question

我试图建立一个应用程序与iframe。它将有控制器来更改iframe样式并向其添加文本。Iframe就像一个预览。我想用javascript创建iframe。我尝试这样创建元素，并将其附加到组件返回div，如下所示:

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

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

我还尝试了另一种方法:

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

在这个方法中，因为我没有返回值，它抛出一个错误。我无法将它插入到组件中。

我该如何解决这个问题?我愿意接受所有的想法。

Answer 1

我找到了一个解决这个问题的方法。当我试图添加元素时，我错过了组件的生命周期。在花了大量的时间之后，这是我的解决方案:

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

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