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

原创 已于 2025-02-25 11:56:50 修改 · 995 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #前端 #javascript

于 2023-07-31 11:52:35 首次发布
在使用react18.2和antd4.19时，由于ReactDOM.render方法已弃用，出现UsecreateRootinstead的错误。升级antd到4.24.12及更高版本，可以消除message和notification组件的警告，这些警告在React18中因使用ReactDOM.render而触发。

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

Ant Design of React从入门到开发教程
a_靖的博客
12-04 4373
Ant Design Pro 是一个企业级中后台前端/设计解决方案。 目录： 一：开发前的准备 二：创建页面 三：创建组件并引用 四：封装网络请求和网络请求走向 五：登录流程以及路由权限设置 六：父组件和子组件相互传值和接收 七：for 循环渲染组件 Ant Design Pro 全家桶技术栈： 1.antd 基于 Ant Design 设计体系的 Rea...
antd 的message 在多层嵌套的函数中调用会导致报错么？
寬真
01-14 834
message 在函数中调用会导致报错么？ // 测试联通性 function testonnectivity(e) { // let a = form.getFieldError('proxyUsername') form.validateFields((err, values) => { if (err) return; ...
解决 Ant Design V5 样式兼容问题
hwjfqr的博客
07-06 7075
Ant Design V5 是截止目前 Ant Design 组件库最新版本，我们在业务场景已经开始应用，但在近期的测试中发现 Ant Design 组件无法在 360 极速浏览器（极速模式）下显示组件样式。经过查看样式和查阅官方文档， Ant Design V5 组件的样式中大量使用了 :where() 选择器来降低选择器的优先级，以此减少开发者升级组件库时额外调整自定义样式的成本。
Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for
最新发布
徐同保的专栏
10-23 255
Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.
Ant Design 组件库的 Message 组件使用注意
weixin_45724850的博客
07-11 1388
但是请注意，你的应用程序将继续以 React 17 的方式运行，无法利用 React 18 的新特性和性能优化。在 React 18 中，引入了并发模式（concurrent mode）和根交互（root interaction）的概念，以提高应用程序的性能和用户体验。同时，请确保你的项目已经升级到 React 18，以便充分利用新的功能和优化。而从 React 18 开始的并发模式（concurrent mode）中，不能在渲染期间调用该方法，而应该在 effect 中触发。在上述示例中，我们使用。
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总（不断更新中）
tangdou369098655的博客
10-09 5655
vite热更新失败解决方案，手把手教你antd4.x和5.x如何自定义主题色，各种报错处理方案集合
解决create-react-app中antd配置主题的报错
GoldenLegs的博客
02-13 1114
首先安装 less, less-loader 项目中暴露配置npm run eject 项目\config\webpack.config.dev.js和webpack.config.prod.js中添加配置,如下: const lessRegex = /\.(less)$/; //添加主题变量 所有变量 const modifyVars = { "primary-color": "pi...
notification.ts:34 Warning: [antd: notification] Static function can not consume context like dynamic theme. Please use 'App' component instead.
08-20
同时，引用[2]提到了React 18中使用antd的message和notification组件报错createRoot warning的问题，并给出了一个GitHub上的修复链接。 引用[3]和[4]则提供了一些其他可能的解决方案，比如清除mfsu缓存（用于umi...
Warning: [antd: notification] Static function can not consume context like dynamic theme. Please use 'App' component instead.
03-12
好的，我现在需要解决用户提到的Ant Design（antd）中的警告信息：“Warning: [antd: notification] Static function can not consume context like dynamic theme. Please use 'App' component instead.” 用户希望...
Electron+React+Antd将网页打包成应用程序完整步骤（electron-builder （搭建热更新） 或 electron-packager（不搭建热更新））
热门推荐
weixin_41888177的博客
08-22 1万+
一、创建React项目 ps：由于写的时候没注意，包安装有的用npm有的用yarn。大家统一用一个就行。尽量不要使用cnpm。 ps：源码地址： git clone https://github.com/Aug-Sunrise/electron-test.git https://github.com/Aug-Sunrise/electron-test/tree/master 1、首先我...
React全家桶+AntD共享单车-后台管理系统开发-笔记-02
mysteryflower的专栏
12-02 678
第三章 主页面架构设计 详细介绍了初始项目的插件安装、主题定制以及主页面结构设计。 3-1 基础插件安装(1) 3-2基础插件安装(2) 3-3 （安装课程中Webpack版本的用户请忽略这一小节）Webpack4.19.1版本文件合并后配置按需加载 3-4 页面结构开发（1） 3-5 页面结构开发（2） 3-6 菜单组件开发（1） 3-7 菜单组件开发（2） 3-8 头部组件实现（1） 3...
解决React18.0.0版本报错问题（降低React版本）
bad985664的博客
04-18 5292
由于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 当然后续如果
react使用antd消息报错You are calling notice in render which will break in React 18 concurrent mode.
08-22 7262
不使用useMessage，直接使用 静态方法message.info：github问题地址：
React——Ant Design组件库Message全局提示的使用
朝朝忆萍的博客
02-24 7617
使用useMessage方式时，如果要跳转页面需要用promise调用
Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see
卤橙的博客
05-07 983
Ant Design v5 与 React 19 兼容性警告，需要处理兼容性问题。
react框架从18版本降低至16.10版本后npm安装antd失败问题解决记录
UnhappyEgg的博客
03-16 407
命令安装antd包。这个命令将安装antd并强制解决依赖项冲突问题。
antd message设置无效（未正常弹出）踩坑记录
weixin_44197210的博客
09-23 8569
环境：react 的一个function components中 在数据提交成功后想给一个提示，结果提示为成功；结果发现提示未弹出来，后排查时代码确实是到了message.success(‘暂存成功！’)。 原因：是因为setGuideId是一个useState 导致这个function components又重新render了，render的时候把messasge的dom直接干掉了？我现在也不太确定，但确实是不去改变state的话就能成功弹出？ 解决方案：把setGuideId晚一些执行。果然可以了！
react中的类组件如何使用antd的notification组件
08-13
在 React 类组件中使用 Ant Design 的 `Notification` 组件，通常可以通过调用 `notification.open()` 方法来实现。该方法支持传入多个配置项，例如 `message`、`description`、`duration` 等，用于自定义通知的显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

学途路漫漫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值