如何在 React 組件中插入使用 js 創建的 iframe

Question

我正在嘗試使用 iframe 構建應用程序。 它將有控制器來更改 iframe 樣式並向其添加文本。 iframe 就像一個預覽。 我想用 javascript 創建 iframe。 我嘗試使用此方法創建元素並將其附加到組件返回 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')
);

在這個方法中，因為我沒有返回值，所以會拋出錯誤。 我無法將其插入到組件中。

我應該如何解決這個問題？ 我對所有想法持開放態度。

Answer 1

我找到了解決這個問題的方法。 當我嘗試附加元素時，我錯過了組件生命周期。 經過大量時間后，這是我的解決方案：

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

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

通過在 useEffect 中調用我的函數，我確保創建了我想要附加 chil 的 div。 我使用了 useEffect 但如果你使用的是類組件，你應該使用 componenDidMount()