Create-React-App 创建此 <iframe> 阻止我直接单击或编辑应用程序，除非我在元素浏览器编辑器中将其删除
Create-React-App creates this <iframe> that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor
我最近对 create-react-app 进行了全局安装，有时遇到一个问题，当我处理一个项目时，它没有直接编辑我在其中渲染的内容，而是围绕整个应用程序。
经过进一步检查，它看起来像是在浏览器中呈现为这样的：
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
我在下面截图了这在我的应用程序中的最终样子（iframe 是右边的橙色文本），但它非常烦人，我已经删除了 css 道具并且无法想象是什么导致我的应用程序周围出现此容器。
还有其他人遇到过这个吗？我必须删除此 iframe 才能直接从浏览器编辑元素，但想不通为什么每次我在浏览器中加载应用程序时都会呈现此内容。
经过大量的研究和测试，我终于弄明白了，我希望它可以拯救任何和我处于同样情况的人
我找到了两个可以解决这个问题的解决方案，一个使用 .env 文件有时可以，另一个解决方案是使用 css，我想说总是可以解决这个问题。
修复 #1：.env 解决方案
在根文件夹层级（与.gitignore，package.json，README.md，yarn.lock，/src同级），创建一个.env文件并在其中包括以下内容：
FAST_REFRESH=false
这有时会奏效，但如果一段时间后仍不起作用，请继续执行下面的第二个解决方案。
修复 #2：App.css 修复为 iframe
禁用 pointer-events
这个解决方案让我省了很多钱。基本上，此解决方案修复的是 React.js 模板中应用程序中存在的 html 文件周围的 iframe 包装。
在您的全局样式文件中，将以下 属性 添加到 iframe 元素：pointer-events: none。然后我将这个 css 文件导入到我的 JSX 页面中，这样它将删除页面周围的这个 iframe 包装器。这将禁用 iframe 覆盖并允许您有效地点击 window 框架内的任何地方。
iframe {
pointer-events: none;
}
希望这些解决方案之一能为您节省数小时的研究和时间
我没试过，但接受的答案看起来只会一起禁用快速刷新，这并不理想所以..
看看这个github问题回复
https://github.com/facebook/create-react-app/issues/11880#issuecomment-1005409614
具体我只需要
// package.json
"resolutions": { "react-error-overlay": "6.0.9" },
更新后确保运行yarn或npm install
我遇到这个问题是因为我的代码中有一些错误，在我修复所有 lint 错误后，iframe 消失了
see the detail here
您可以将此添加到您的 css，这将隐藏 iframe 并防止它影响您的工作
iframe {
display: none;
}
我不想禁用页面上的所有 iframe，所以我使用这个：
body > iframe {
pointer-events: none;
}
我最近对 create-react-app 进行了全局安装，有时遇到一个问题，当我处理一个项目时，它没有直接编辑我在其中渲染的内容，而是围绕整个应用程序。
经过进一步检查，它看起来像是在浏览器中呈现为这样的：
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
我在下面截图了这在我的应用程序中的最终样子（iframe 是右边的橙色文本），但它非常烦人，我已经删除了 css 道具并且无法想象是什么导致我的应用程序周围出现此容器。
还有其他人遇到过这个吗？我必须删除此 iframe 才能直接从浏览器编辑元素，但想不通为什么每次我在浏览器中加载应用程序时都会呈现此内容。
经过大量的研究和测试，我终于弄明白了，我希望它可以拯救任何和我处于同样情况的人
我找到了两个可以解决这个问题的解决方案，一个使用 .env 文件有时可以，另一个解决方案是使用 css，我想说总是可以解决这个问题。
修复 #1：.env 解决方案
在根文件夹层级（与.gitignore，package.json，README.md，yarn.lock，/src同级），创建一个.env文件并在其中包括以下内容：
FAST_REFRESH=false
这有时会奏效，但如果一段时间后仍不起作用，请继续执行下面的第二个解决方案。
修复 #2：App.css 修复为 iframe
禁用 pointer-events
这个解决方案让我省了很多钱。基本上，此解决方案修复的是 React.js 模板中应用程序中存在的 html 文件周围的 iframe 包装。
在您的全局样式文件中，将以下 属性 添加到 iframe 元素：pointer-events: none。然后我将这个 css 文件导入到我的 JSX 页面中，这样它将删除页面周围的这个 iframe 包装器。这将禁用 iframe 覆盖并允许您有效地点击 window 框架内的任何地方。
iframe {
pointer-events: none;
}
希望这些解决方案之一能为您节省数小时的研究和时间
我没试过，但接受的答案看起来只会一起禁用快速刷新，这并不理想所以..
看看这个github问题回复
https://github.com/facebook/create-react-app/issues/11880#issuecomment-1005409614
具体我只需要
// package.json
"resolutions": { "react-error-overlay": "6.0.9" },
更新后确保运行yarn或npm install
我遇到这个问题是因为我的代码中有一些错误，在我修复所有 lint 错误后，iframe 消失了 see the detail here
您可以将此添加到您的 css，这将隐藏 iframe 并防止它影响您的工作
iframe {
display: none;
}
我不想禁用页面上的所有 iframe，所以我使用这个：
body > iframe {
pointer-events: none;
}