直接渲染组件警告答案

【问题标题】：Rendering components directly warning直接渲染组件警告
【发布时间】：2018-04-17 11:28:33
【问题描述】：

一段时间以来，我一直收到以下警告，但我不确定问题到底是什么：

警告：render()：将组件直接渲染到 document.body 是气馁，因为它的孩子经常被第三方操纵脚本和浏览器扩展。这可能会导致微妙的和解问题。尝试渲染到为您的应用创建的容器元素中。

有些人建议使用ReactDOM.render()，这正是我最初所做的，我使用 facebook 的 Create React App 作为我的应用程序的基础。

有什么线索吗？

编辑：我的 index.js

ReactDOM.render(<App />, document.getElementById("root"));

【问题讨论】：

警告不应该发生，除非你像这样渲染ReactDOM.render(<App />, document.body);。您使用的是哪个版本的反应？我没有收到此警告。
所以我今天刚刚安装了 npm，我的 package.json 说 "react": "16.2.0"
你能渲染 create-react-app 给出的起始页吗？
是的，据我所知，一切正常，该应用程序已从样板文件转移到几乎最终版本，没有真正的问题，只是我一直在日志中看到一个非常烦人的警告。 ..
嗯..奇怪。当您尝试直接在 document.body 中呈现时，您会收到警告。但是，您的 index.js 中的代码是您收到的警告的正确修复程序。我已经使用 create-react-app 创建了一个 repo，但我无法重现您的问题。

标签： javascript reactjs react-dom

【解决方案1】：

如果在您的index.html html body 标记中具有root id，则会发生此问题。

在您的index.html 更改：

<body id="root"></body>

到：

<body>
   <div id="root"></div>
</body>

【讨论】：

尽我所能。谢谢

【解决方案2】：

这里有两种可能的解决方案：

修改您的 HTML 并添加 <div> 并将其用于呈现 （推荐）：

ReactDOM.render(&lt;App /&gt;, document.getElementById('react-app'));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React app</title>
</head>
<body>
    <div id="react-app"></div>
</body>
</html>

使用 JavaScript 创建一个元素并将其附加到正文并使用它进行渲染：

var reactapp = document.createElement("div");
document.body.appendChild(reactapp);
ReactDOM.render(<App />, reactapp);

【讨论】：