React 18 使用antd的message,notification组件报错createRoot warning

最新推荐文章于 2023-10-09 01:56:15 发布
最新推荐文章于 2023-10-09 01:56:15 发布
阅读量388 收藏
点赞数
分类专栏： react 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn1940879828/article/details/132019536
版权

react版本：18.2

antd版本：4.19

报错：Use createRoot instead" occurs because the ReactDOM.render method has been deprecated. To solve the error, create a root element and use the ReactDOMClient.render method instead. This occurs since the render () method of the react-dom package is considered legacy starting react-dom version 18.

试了antd的4.17版本 4.19版本 4.19.5版本 问题都存在

解决：升级到文档上最新4.x版本：4.24.12

就可以了 不报错了

参考：

升级 React18 后 message, notification两个组件会提示警告 · Issue #34823 · ant-design/ant-design · GitHub

fix: Notification & message throw `createRoot` warning in React 18 by zombieJ · Pull Request #35030 · ant-design/ant-design · GitHub

fix: React 18 use createRoot instead by zombieJ · Pull Request #203 · react-component/notification · GitHub

学途路漫漫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
2022升级 React18+TS高仿AntD从零到一打造组件库
09-01
在本项目中，我们将深入探讨如何使用最新版的React 18和TypeScript来创建一个高仿Ant Design的自定义组件库。React 18是Facebook推出的React JavaScript库的重大更新，它引入了一些新特性，旨在提升性能和开发体验。...
React——Ant Design组件库Message全局提示的使用
朝朝忆萍的博客
02-24 5179
使用useMessage方式时，如果要跳转页面需要用promise调用
Ant Design 组件库的 Message 组件使用注意
weixin_45724850的博客
07-11 921
但是请注意，你的应用程序将继续以 React 17 的方式运行，无法利用 React 18 的新特性和性能优化。在 React 18 中，引入了并发模式（concurrent mode）和根交互（root interaction）的概念，以提高应用程序的性能和用户体验。同时，请确保你的项目已经升级到 React 18，以便充分利用新的功能和优化。而从 React 18 开始的并发模式（concurrent mode）中，不能在渲染期间调用该方法，而应该在 effect 中触发。在上述示例中，我们使用。
React开发中常见报错之组件更新错误
coder__wang的博客
07-25 886
在React开发中，这样的报错会经常遇到：Warning: Can't perform a React state update on an unmounted component.
react使用antd消息报错You are calling notice in render which will break in React 18 concurrent mode.
08-22 4090
不使用useMessage，直接使用 静态方法message.info：github问题地址：
解决React18.0.0版本报错问题（降低React版本）
bad985664的博客
04-18 3955
由于React最近新出18.0.0版本 所以create-react-app创建的项目默认为react18版本 目前有很多不适配不支持 比如Ant Design Mobile插件库 解决方案 降低版本 输入命令：npm install react@17.x react-dom@17.x --save 查看当前React版本 自己的React版本可以在项目的package.json文件中看到，搜索“react”，即可看到版本号： 查看React最新版本命令 npm info react 当然后续如果
解决create-react-app中antd配置主题的报错
GoldenLegs的博客
02-13 1020
首先安装 less, less-loader 项目中暴露配置npm run eject 项目\config\webpack.config.dev.js和webpack.config.prod.js中添加配置,如下: const lessRegex = /\.(less)$/; //添加主题变量 所有变量 const modifyVars = { "primary-color": "pi...
基于React 18和Antd 5的全球新闻发布系统设计源码
最新发布
03-29
这是一个基于React 18和Antd 5的全球新闻发布系统设计，使用JavaScript、CSS和HTML语言开发，包含27个文件。主要文件类型包括13个JavaScript文件、3个JSON文件、2个gitignore文件、2个CSS文件、1个env文件、1个...
react+ts+antd cron表达式组件
11-16
在这个"react+ts+antd cron表达式组件"项目中，开发者整合了这些技术来实现一个特定功能——Cron表达式编辑器。 Cron表达式是一种用于配置定时任务的格式，常见于Unix和Linux系统。它由七个字段组成，从左到右分别...
React-TS-Antd：React组件库
02-14
Antd在国内被广泛的使用，作为一名有志向的程序员替代学会如何使用它，也要有能力去大体了解Antd整个结构，当组件库出现问题的时候，能够快速发现到问题，还有就是在建造项目的流程中，同时把核心代码写出来就完成事...
react18踩坑记录
jsmeng626的博客
03-09 1255
react-router-dom5中,跳转路由地址刷新页面不刷新问题 react-router-dom6中Uncaught Error: useNavigate() may be used only in the context of a component. react-router-dom6嵌套路由正确写法 使用antd的table时Each child in a list should have a unique “key” prop react中使用useRoutes注册路由，跳转children
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总（不断更新中）
tangdou369098655的博客
10-09 4818
vite热更新失败解决方案，手把手教你antd4.x和5.x如何自定义主题色，各种报错处理方案集合
为什么牛逼的程序员都不用 “ ! = null “ 做判空？
程序员麦冬的博客（公众号同名）
10-13 815
问题 为了避免空指针调用，我们经常会看到这样的语句 ...if (someobject != null) { someobject.doCalc();}... 最终，项目中会存在大量判空代码，多么丑陋繁冗！如何避免这种情况？我们是否滥用了判空呢？ 精华回答 这是初、中级程序猿经常会遇到的问题。他们总喜欢在方法中返回null，因此，在调用这些方法时，也不得不去判空。另外，也许受此习惯影响，他们总潜意识地认为，所有的返回都是不可信任的，为了保护自己程序，就加了大量的判空。 吐槽完毕，回到这个题目本身：
Ant Design of Vue （5）使用confirm 调用其他方法返回时，使用this.$notification作为返回信息提示时报属性示定义的错误解决方案
build2024
09-18 1926
一.使用confirm进行确认后 二.返回成功或失败信息的时候使用this.notification作为提示时报错 通知提醒框 Notification - Ant Design Vue (antdv.com) 报错提示$notification没有定义： 三.解决方法，在确认框中用到的当前作用域时，this需要提前替换为局部变量，否则浏览器会提示无法获取该属性。 五.效果 点击确认后， 弹出结果 参考文章：(34条消息) 前端问题...
react框架从18版本降低至16.10版本后npm安装antd失败问题解决记录
UnhappyEgg的博客
03-16 237
命令安装antd包。这个命令将安装antd并强制解决依赖项冲突问题。
antd Pro 统一错误处理及解决接口返回错误时页面出现的BizError
总结，交流，记录，成长
03-31 2728
antd pro 统一错误处理及解决接口返回错误出现BizError页
ant notification的使用
ast_5921的博客
11-25 1217
import { Button, notification } from 'antd'; queryDemanDetail_two = () => { const openNotificationWithIcon = type => { switch (type) { case 'success': notification[type](...
antdmessage使用_AntDesign的Alert、Modal、Message、Notification的用法有什么不同？
weixin_35814757的博客
12-23 3278
按照 Material Design 的文档来说，重量级上是提醒 < 静态消息 < 模态框的。而 antd 将提醒再根据复杂度以及可交互与否区分开了 Message 与 Notification，也就是 Message < Notification < Alert < Modal。其中，Modal 是打断式的交互，也就是说会使得用户从原本的信息层级中跳转出来；但比起整...
react antd 中$message的全局配置
ll_883963的博客
05-07 5446
在src的根文件 index.js中进行配置 import { message } from 'antd'; message.config({ duration: 2,// 持续时间 maxCount: 3 // 最大显示数, 超过限制时，最早的消息会被自动关闭 top: 70,// 到页面顶部距离 });
在react中使用antd的table组件怎么实现每行数据的交换
04-08
你可以使用Antd Table组件的onRow方法来实现每行数据的交换。首先，给Table组件传递一个dataSource数组，每个数组元素表示一行数据；其次，给每行数据的<tr>元素添加一个可点击的onRow方法，将当前点击的行记录下来；最后，在onRow方法中，根据点击的行和目标行的索引值，将两行数据进行交换即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学途路漫漫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值