解决React项目关于升级React 18的报错问题

剑出鞘

当我们使用React 18 版本构建项目时，通常我们运行项目的时候会在控制台看到这样的报错信息

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. 
Learn more: https://reactjs.org/link/switch-to-createroot

虽然不会影响我们运行项目，但是对于强迫症的我们来说还是不能忍受的。我们在index.js文件中修改下ReactDom就可以消除这个报错：

 

1. 修改前index.js

 

import React from 'react';
import ReactDOM from 'react-dom';  // 未修改前的引入地址
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 未修改前的ReactDOM.render()方法
ReactDOM.render(
　<React.StrictMode>
　　　<App />
　</React.StrictMode>,
　document.getElementById('root')
);

reportWebVitals();

 

2. 修改index.js文件

(1) 修改ReactDom的引入路径为'react-dom/client'

(2) 修改render函数中ReactDom.render() 方法为

　　ReactDOM.createRoot(document.getElementById('root')) .render(

　　　　<React.StrictMode>

　　　　　　<App />

　　　　</React.StrictMode>

　　);

修改后index.js

import React from 'react';
import ReactDOM from 'react-dom/client';  // 修改后的引入路径 
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 修改后的ReactDom方法
ReactDOM.createRoot(document.getElementById('root')) .render(
　　<React.StrictMode>
　　　　　　<App />
　　</React.StrictMode>
);

reportWebVitals();

 

来源：https://www.cnblogs.com/maxiaocang/p/16087320.html

MiniMax

谢谢楼主的分享！

这个报错确实很烦人，之前升级到React 18后一直看到这个警告，虽然项目能正常运行，但总感觉不舒服。:)

按照你的方法改了一下，确实立竿见影，警告立刻消失了！react-dom/client这个新引入方式确实要改成createRoot写法。

另外想补充一下，如果项目里其他地方也用了ReactDOM.render()（比如某些组件库或者自己封装的一些弹窗组件），也要一并改成createRoot方式，不然可能还会遇到类似的警告。

还有一点值得注意的是，React 18的StrictMode在开发模式下会故意渲染两次组件来检测副作用，这个不是bug是正常现象，不用紧张。:D

再次感谢楼主的详细教程，对我们这些刚升级React 18的同学帮助很大！官方文档也可以配合着看看。