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

antd 的message 在多层嵌套的函数中调用会导致报错么？
寬真
01-14 834
message 在函数中调用会导致报错么？ // 测试联通性 function testonnectivity(e) { // let a = form.getFieldError('proxyUsername') form.validateFields((err, values) => { if (err) return; ...
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总（不断更新中）
tangdou369098655的博客
10-09 5656
vite热更新失败解决方案，手把手教你antd4.x和5.x如何自定义主题色，各种报错处理方案集合
Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for
最新发布
徐同保的专栏
10-23 256
Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.
解决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...
解决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问题地址：
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...
Ant Design of React从入门到开发教程
a_靖的博客
12-04 4374
Ant Design Pro 是一个企业级中后台前端/设计解决方案。 目录： 一：开发前的准备 二：创建页面 三：创建组件并引用 四：封装网络请求和网络请求走向 五：登录流程以及路由权限设置 六：父组件和子组件相互传值和接收 七：for 循环渲染组件 Ant Design Pro 全家桶技术栈： 1.antd 基于 Ant Design 设计体系的 Rea...
React——Ant Design组件库Message全局提示的使用
朝朝忆萍的博客
02-24 7617
使用useMessage方式时，如果要跳转页面需要用promise调用
Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see
卤橙的博客
05-07 985
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版本不匹配error
m0_46796399的博客
12-29 987
降低antd版本：yarn add antd @5.0（5.22.7降低到5.0版本）
浅谈antd5兼容
欢迎来到☆槿畔☆的博客
04-06 4575
antd5的兼容性。。。
react中的类组件如何使用antd的notification组件
08-13
在 React 类组件中使用 Ant Design 的 `Notification` 组件，通常可以通过调用 `notification.open()` 方法来实现。该方法支持传入多个配置项，例如 `message`、`description`、`duration` 等，用于自定义通知的显示效果[^1]。 以下是一个完整的使用示例： ```jsx import React from 'react'; import { Button, notification } from 'antd'; class NotificationDemo extends React.Component { openNotification = () => { notification.open({ message: '这是一个通知', description: '这是 Ant Design 的 Notification 组件在类组件中的使用示例。', duration: 3, // 设置通知显示时长，单位为秒 placement: 'topRight', // 设置通知显示位置 }); }; render() { return ( <div> <Button type="primary" onClick={this.openNotification}> 显示通知 </Button> </div> ); } } export default NotificationDemo; ``` ### 配置说明 - `message`: 必填项，用于设置通知的标题。 - `description`: 可选，用于设置通知的详细描述内容。 - `duration`: 可选，设置通知自动关闭的延时，单位为秒，默认值为 4.5 秒。 - `placement`: 可选，设置通知显示的位置，支持 `topLeft`、`topRight`、`bottomLeft`、`bottomRight`。 - `onClick`: 可选，设置点击通知时的回调函数。 如果需要自定义通知图标，可以使用 `icon` 属性： ```jsx notification.open({ message: '自定义图标', description: '这是带有自定义图标的通知示例。', icon: <span role="img" aria-label="custom-icon">🔔</span>, }); ``` 此外，如果需要手动关闭通知，可以使用 `notification.close(key)` 方法，其中 `key` 是通知的唯一标识符。 ```jsx const key = 'custom_key'; notification.open({ key, message: '可手动关闭的通知', description: '您可以点击下方按钮手动关闭该通知。', }); // 手动关闭通知 notification.close(key); ``` ### 注意事项 - `notification.open()` 是一个静态方法，因此可以在类组件的方法中直接调用。 - 如果需要多次调用不同的通知，确保为每个通知分配唯一的 `key`，以避免冲突。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

学途路漫漫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值