Create-React-App 创建这个 <iframe> ，它阻止我直接单击或编辑应用程序，除非我在元素浏览器编辑器中删除它

Question

我最近对 create-react-app 进行了全局安装，并且遇到了一个问题，有时，当我在处理一个项目时，它不是直接编辑我在中渲染的内容，而是在整个应用程序周围创建这个容器。

经过进一步检查，它看起来像是在浏览器中呈现的，如下所示：

<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>

我在下面截图了这在我的应用程序中的最终样子（iframe 是右侧的橙色文本），但这非常烦人，我已经删除了 css 属性，无法想象是什么导致了我的应用程序周围出现这个容器。

还有其他人遇到过这个吗？我必须删除这个 iframe 才能直接从浏览器编辑元素，但无法想象为什么每次我在浏览器中加载应用程序时都会呈现它。

Answer 1

因此，经过大量研究和测试，我终于弄清楚了这一点，我希望它可以拯救任何处于与我相同情况的人

我找到了两种可以解决此问题的解决方案，一种是.env有时可以工作的文件，另一种是css我想说的始终可以解决此问题的解决方案。

修复 #1：.env 解决方案

在根文件夹级别（与 .gitignore、package.json、README.md、yarn.lock、/src 相同的级别），创建一个.env文件并在其中包含以下内容：

FAST_REFRESH=false

这有时会起作用，但如果一段时间后不起作用，请继续执行下面的第二个解决方案。

这个解决方案为我节省了很多。基本上，这个解决方案修复的是在 React.js 模板中应用程序中存在的 html 文件周围包装 iframe。

在全局样式文件中，将以下属性添加到 iframe 元素：pointer-events: none。然后，我将此 css 文件导入到我的 JSX 页面中，以便它将删除页面周围的此 iframe 包装器。这将禁用 iframe 覆盖并允许您有效地单击窗口框架内的任意位置。

iframe {
  pointer-events: none;
}

希望这些解决方案之一可以节省您的研究时间和时间

Answer 2

我还没有尝试过，但接受的答案看起来只会禁用快速刷新，这并不理想，所以..

看看这个 github 问题回复

具体来说我只需要

// package.json

"resolutions": { "react-error-overlay": "6.0.9" },

确保运行yarn或npm install更新后