在React应用程序中，iframe出现在开发者工具的元素中。

Question

4

这是我第一次提问，不太清楚如何描述/写出来。

我正在进行一个React项目（通过克隆学习）。在观看视频教程并首次使用Firebase和Redux后，我取得了很多进展。然而，我遇到了一个问题：当我保存工作时，本地3000主机不会自动刷新。我知道有很多答案，但它们对我都没有用。

但主要问题是： 我在开发者工具中看到

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

在这个标签内，有一个#document，里面包含了<html>、<head>和<body>。

我不知道这是什么及其显示原因。然后我查询了什么是iframe，但我从未在我的项目中使用过这样的东西。在经过大量研究之后，我仍然无法找到删除它的方法或答案（请查看开发者工具中的屏幕截图）。

我可以看到所有的组件，但它们不能响应我的操作，例如无法输入、鼠标悬停等。但是当我在开发者工具中手动删除<iframe>时，它能正常工作。

- Shaheryar

请澄清您的具体问题或提供额外的细节，以准确突出您所需的内容。目前的描述方式很难确切地了解您的要求。 - Community

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ombukuro · Answer 1

React使用iframe在热加载期间向DOM注入更改。有时会失败并且无法移除iframe，从而导致此行为。

修复的方法是添加：

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

在您的 package.json 文件中，scripts 后面立即删除 package.lock 或 yarn.lock 文件，然后再次安装依赖包。

- Fahad Hussain · Answer 2

尝试使用以下代码在package.json文件中更新您的浏览器列表：

"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]

确保您没有错误。这是一个快速修复。