解決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();