Question

我现在已经有一段时间收到以下警告了，而且我很不确定实际上是什么问题：

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

有些人建议使用ReactDOM.render()，这正是我首先要做的，我使用facebook的创建反应应用程序来开启我的应用。

任何线索？

编辑：我的index.js

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

Answer 1

如果您的index.html html正文标记中包含root个ID，则会出现此问题。

在index.html更改：

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

为：

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

Answer 2

以下是两种可能的解决方案：

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

ReactDOM.render(<App />, 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);

直接渲染组件警告

2 个答案: