react iframe ref DOM 更新在 Firefox 中的行为与 chrome 不同

问题描述

以下组件

import React from "react";

const App = (props) => {
  const iframe = React.useRef();

  React.useEffect(() => {
    (async () => {
      // await new Promise((r) => setTimeout(r,1));
      iframe.current.contentDocument.body.style.backgroundColor = "salmon";
    })();
  },[]);

  return (
    <>
      <iframe ref={iframe} title="foo" />
    </>
  );
};

export default App;

在 Chrome 中，iframe 具有颜色，但在 Firefox 中没有。 如果我在像 await new Promise((r) => setTimeout(r,1000)); 这样的 ref DOM 更新之前稍微睡一觉，那么 Firefox 中的 iframe 也有颜色。

运行 https://codesandbox.io/s/determined-pike-jc5h3?file=/src/App.js 可以看到差异。

只有 iframe 有这个问题，其他普通标签如 div 没有。

是什么让 Firefox 的行为与 Chrome 不同？

chrome 版本：版本 89.0.4389.90（官方版本）(x86_64) Firefox 版本：86.0.1（64 位）

顺便说一句，我也尝试在本地 PC 上运行它。我觉得在 Firefox 上，每次刷新页面，在极短的时间内 iframe 有颜色然后消失。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）