解决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(
 
   
 ,
 document.getElementById('root')
);

reportWebVitals();

2. 修改index.js文件

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

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

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

    

      

    

  );

修改后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(
  
      
  
);

reportWebVitals();