关于直接渲染组件至document.body的警告问题咨询

我太懂这种困惑了——明明已经在用ReactDOM.render()，结果还是弹出那个烦人的警告，简直摸不着头脑对吧？别慌，咱们一步步捋清楚问题出在哪。

首先，先明确这个警告的核心：React不建议你直接把组件渲染到document.body，因为浏览器的body节点是个“公共区域”——第三方脚本、浏览器扩展（比如广告插件、翻译工具）经常会偷偷修改它的子元素，这会干扰React的DOM diff和渲染逻辑，搞出一些难以排查的异常。

那问题来了：你明明用了ReactDOM.render()，为啥还触发警告？大概率是你把渲染目标直接设成了document.body，只是可能没留意到。咱们来验证并解决：

第一步：检查你的渲染代码 #

先看看你是不是写了类似这样的代码：

// 错误示例：直接渲染到document.body
ReactDOM.render(<App />, document.body);

如果是的话，这就是警告的源头！哪怕用了ReactDOM.render()，只要挂载目标是document.body，就会触发这个提示。

第二步：给React创建专属容器 #

打开你的HTML入口文件，在body标签里添加一个专门给React应用用的容器节点，比如：

<body>
  <!-- 这是React的专属容器，其他脚本不会随意修改它 -->
  <div id="react-root"></div>
</body>

第三步：修改渲染目标 #

把ReactDOM.render()的第二个参数改成这个新容器：

// 正确示例：渲染到专属容器
ReactDOM.render(<App />, document.getElementById('react-root'));

如果你的项目用的是React 18及以上版本，官方已经推荐用createRoot替代旧的ReactDOM.render()写法，代码会变成这样：

import { createRoot } from 'react-dom/client';

const rootElement = document.getElementById('react-root');
const root = createRoot(rootElement);
root.render(<App />);

这样修改之后，React只会操作自己专属的容器节点，不会和第三方脚本、浏览器扩展抢document.body的控制权，警告自然就消失了。

内容的提问来源于stack exchange，提问作者Return-1