javascript - 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 Prop ，无法想象是什么导致了我的应用程序周围的这个容器。
有没有其他人遇到过这个？我必须删除这个 iframe 才能直接从浏览器中编辑元素，但想不出为什么每次我在浏览器中加载应用程序时都会呈现这种情况。

Answer 1

所以经过大量的研究和测试，我终于想通了，我希望它可以拯救任何和我一样的人😊
我找到了两个可以解决这个问题的解决方案，一个是 .env有时有效的文件，另一种解决方案是使用 css我想说的总是会解决这个问题。
修复 #1:.env 解决方案
在根文件夹级别(与.gitignore、package.json、README.md、yarn.lock、/src同级)，创建.env文件并在其中包含以下内容:

FAST_REFRESH=false

这有时有效，但如果一段时间后这不起作用，请继续下面的第二个解决方案。
修复 #2: App.css修复为 iframe 禁用指针事件
这个解决方案为我节省了很多。基本上，这个解决方案修复的是围绕 React.js 模板中应用程序中存在的 html 文件的包装 iframe。
在全局样式文件中，将以下属性添加到 iframe 元素: pointer-events: none .然后我将这个 css 文件导入到我的 JSX 页面中，这样它将删除页面周围的这个 iframe 包装器。这将禁用 iframe 覆盖并允许您有效地单击窗口框架内的任何位置。

iframe {
  pointer-events: none;
}

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