直接渲染组件警告

Question

直接渲染组件警告

Ret*_*n-1 1 javascript reactjs react-dom

我已经有一段时间得到以下警告,而且我很不确定实际上是什么问题:

警告:render():不鼓励将组件直接呈现到document.body中,因为它的子项通常由第三方脚本和浏览器扩展操作.这可能会导致细微的和解问题.尝试渲染为为您的应用创建的容器元素.

有些人建议使用ReactDOM.render(),这正是我首先要做的,我使用facebook的Create React App来开发我的应用程序.

有线索吗？

编辑:我的index.js

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

Answer 1

小智 10

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

修改您的 HTML 并添加<div>并使用它进行渲染（推荐）：

ReactDOM.render(<App />, document.getElementById('react-app'));

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

使用 JavaScript 创建一个元素并将其附加到主体并使用它来渲染：

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

kia*_*hws 7

如果在您index.html的html body标签中有rootid,则会出现此问题.

在你的index.html变化中:

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

Run Code Online (Sandbox Code Playgroud)

至:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，7 月前
查看次数：	2760 次
最近记录：	6 年，1 月前