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

Question

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

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

ı 收到此错误：TypeError：无法读取 null 的属性（读取 'appendChild'）

我也试过另一种方法:

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

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

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

Answer 1

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

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

useEffect(() => {
    createIframe();
  });

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

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

How to insert iframe created using js in a React component

html

javascript

iframe

reactjs

react-router