react报错ReactDOM.render is no longer supported in React 18. 解决

简介: react报错ReactDOM.render is no longer supported in React 18. 解决

报错信息:

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

ReactDOM。React 18不再支持渲染。使用createRoot代替。在您切换到新的API之前,您的应用程序将表现得像在运行React 17

原因:

React团队目前推出最新的版本为18.0,在18.0版本中,React 18 不再支持 ReactDOM.render

控制台报错:

解决方法:

在index.js文件内使用createRoot即可

import React from 'react'
import ReactDOM from 'react-dom'
import TopList from './TopList'
// 解决报错的写法  使用createRoot
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<TopList/>)
// 报错的写法
// ReactDOM.render( < TopList /> , document.getElementById('root'))
目录
相关文章
|
2月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
241 1
|
3月前
|
前端开发
React使用useRef ts 报错
【8月更文挑战第17天】
67 4
|
2月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
48 2
|
6月前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
230 0
|
5月前
|
前端开发 索引
解决React报错Encountered two children with the same key
解决React报错Encountered two children with the same key
|
5月前
|
前端开发
react怎么做图片报错处理
react怎么做图片报错处理
71 1
|
6月前
|
JavaScript 前端开发
vue3中使用jsx报错React is not defined和h is not defined
vue3中使用jsx报错React is not defined和h is not defined
828 0
|
6月前
react+typescript装饰器写法报错的解决办法
react+typescript装饰器写法报错的解决办法
85 1
|
缓存 前端开发
前端项目实战捌拾捌react-admin+material ui-踩坑-List之一直报错需要什么样的字段
前端项目实战捌拾捌react-admin+material ui-踩坑-List之一直报错需要什么样的字段
41 0
|
6月前
|
Web App开发 前端开发 JavaScript
React项目中发生空白但不报错的原因分析和解决?
React项目中发生空白但不报错的原因分析和解决?
178 0