解决React项目关于升级React 18的报错问题
<p>当我们使用React 18 版本构建项目时，通常我们运行项目的时候会在控制台看到这样的报错信息</p><div class="cnblogs_code">
<pre>Warning: ReactDOM.render is no longer supported <span style="color: rgba(0, 0, 255, 1)">in</span> React 18. Use createRoot instead. Until you <span style="color: rgba(0, 0, 255, 1)">switch</span> to the <span style="color: rgba(0, 0, 255, 1)">new</span> API, your app will behave as <span style="color: rgba(0, 0, 255, 1)">if</span> it's running React 17. <br>Learn more: https://reactjs.org/link/switch-to-createroot</pre>
</div>
<p>虽然不会影响我们运行项目，但是对于强迫症的我们来说还是不能忍受的。我们在index.js文件中修改下ReactDom就可以消除这个报错：</p>
<p> </p>
<p>1. 修改前index.js</p>
<p> </p>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import ReactDOM from </span>'react-dom';<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 未修改前的引入地址</span>
import './index.css'<span style="color: rgba(0, 0, 0, 1)">;
import App from </span>'./App'<span style="color: rgba(0, 0, 0, 1)">;
import reportWebVitals from </span>'./reportWebVitals'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 未修改前的ReactDOM.render()方法</span>
<span style="color: rgba(0, 0, 0, 1)">ReactDOM.render(
</span><React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'<span style="color: rgba(0, 0, 0, 1)">)
);
reportWebVitals();</span></pre>
</div>
<p> </p>
<p>2. 修改index.js文件</p>
<p>(1) 修改ReactDom的引入路径为'react-dom/client'</p>
<p>(2) 修改render函数中ReactDom.render() 方法为</p>
<p><span style="font-size: 12px"> <strong>ReactDOM.createRoot(document.getElementById('root')) .render(</strong></span></p>
<p><strong><span style="font-size: 12px"> <React.StrictMode></span></strong></p>
<p><strong><span style="font-size: 12px"> <App /></span></strong></p>
<p><strong><span style="font-size: 12px"> </React.StrictMode></span></strong></p>
<p><strong><span style="font-size: 12px"> );</span></strong></p>
<p>修改后index.js</p>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import ReactDOM from </span>'react-dom/client';<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 修改后的引入路径 </span>
import './index.css'<span style="color: rgba(0, 0, 0, 1)">;
import App from </span>'./App'<span style="color: rgba(0, 0, 0, 1)">;
import reportWebVitals from </span>'./reportWebVitals'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 修改后的ReactDom方法</span>
ReactDOM.createRoot(document.getElementById('root'<span style="color: rgba(0, 0, 0, 1)">)) .render(
</span><React.StrictMode>
<App />
</React.StrictMode>
<span style="color: rgba(0, 0, 0, 1)">);
reportWebVitals();</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/maxiaocang/p/16087320.html 谢谢楼主的分享！
这个报错确实很烦人，之前升级到React 18后一直看到这个警告，虽然项目能正常运行，但总感觉不舒服。:)
按照你的方法改了一下，确实立竿见影，警告立刻消失了！react-dom/client这个新引入方式确实要改成createRoot写法。
另外想补充一下，如果项目里其他地方也用了ReactDOM.render()（比如某些组件库或者自己封装的一些弹窗组件），也要一并改成createRoot方式，不然可能还会遇到类似的警告。
还有一点值得注意的是，React 18的StrictMode在开发模式下会故意渲染两次组件来检测副作用，这个不是bug是正常现象，不用紧张。:D
再次感谢楼主的详细教程，对我们这些刚升级React 18的同学帮助很大！官方文档也可以配合着看看。
頁:
[1]