Ant Design v5 不兼容 React 19,导致 message.xxx() 内部渲染逻辑没有生效(也就是弹不出消息框)。

Ant Design 内部的 message, modal, notification 等功能,都使用了 React DOM 渲染挂载(如 ReactDOM.render() ,这在 React 19 已经发生变化,导致弹窗功能失效。

使用原生替代方案(如 react-toastify)临时替代

如果你一定要用 React 19,但不愿降级,可以使用类似 react-toastify

复制代码
bash
复制编辑
npm install react-toastify

toast.ts 中封装:

typescript 复制代码
ts
复制编辑
import { toast as notify } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

type MessageType = 'success' | 'error' | 'info' | 'warning';

export default function toast(msg: string = '', type: MessageType = 'success') {
  notify[type](msg, { autoClose: 1500 });
}

并在根组件中:

javascript 复制代码
tsx
复制编辑
import { ToastContainer } from 'react-toastify';

function App() {
  return (
    <>
      <YourRouterOrLayout />
      <ToastContainer />
    </>
  );
}
相关推荐
kkce20 小时前
域名CDN检测意义
服务器·前端·网络
ZoeLandia20 小时前
Qiankun 生命周期与数据通信实战
前端·微前端·qiankun
LawrenceLan20 小时前
Flutter 零基础入门(十五):继承、多态与面向对象三大特性
开发语言·前端·flutter·dart
二川bro21 小时前
详细解析 cesiumViewer.render() 和 requestAnimationFrame(render)
前端
前端付豪21 小时前
必知Node应用性能提升及API test 接口测试
前端·react.js·node.js
王同学 学出来21 小时前
vue+nodejs项目在服务器实现docker部署
服务器·前端·vue.js·docker·node.js
一道雷21 小时前
让 Vant 弹出层适配 Uniapp Webview 返回键
前端·vue.js·前端框架
bug总结21 小时前
uniapp+动态设置顶部导航栏使用详解
java·前端·javascript
晴殇i21 小时前
深入理解MessageChannel:JS双向通信的高效解决方案
前端·javascript·程序员
毕设十刻21 小时前
基于Vue的民宿管理系统st4rf(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js