React18控制台报错Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead

最新推荐文章于 2023-11-07 21:30:23 发布

原创最新推荐文章于 2023-11-07 21:30:23 发布 · 2.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #javascript #前端

收录于

VUE 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何解决React18中ReactDOM.render不再支持的问题，并提供具体的代码修改步骤，帮助开发者顺利完成从旧版到新版的过渡。

1. 报错信息

在这里插入图片描述

react-dom.development.js:86 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

2. 处理方法

修改src/index.js

将
import ReactDOM from ‘react-dom’;
改成
import ReactDOM from ‘react-dom/client’;

将 ReactDOM.render(, document.getElementById(‘root’));
改成
const container = document.getElementById(‘root’);
const root = ReactDOM.createRoot(container);
root.render();

修改之前

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

修改之后

import React from 'react';
import ReactDOM from 'react-dom/client';
import TodoList from './TodoList';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<TodoList />);