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 />
    </>
  );
}
相关推荐
索西引擎5 分钟前
浅谈 Vue 的双向数据绑定
前端·vue.js
iku_ki14 分钟前
axios二次封装-单个、特定的实例的拦截器、所有实例的拦截器。
运维·服务器·前端
断竿散人24 分钟前
前端救急实战:用 patch-package 解决 vue-pdf 电子签章不显示问题
前端·webpack·npm
蓝倾25 分钟前
淘宝获取商品分类接口操作指南
前端·后端·fastapi
十盒半价27 分钟前
深入理解 React 中的 useState:从基础到进阶
前端·react.js·trae
ccc101828 分钟前
前端性能优化实践:深入理解懒加载的实现与最佳方案
前端
CodeTransfer30 分钟前
今天给大家搬运的是四角线框hover效果
前端·vue.js
归于尽31 分钟前
别让类名打架!CSS 模块化教你给样式上 "保险"
前端·css·react.js
凤凰AI1 小时前
Python知识点4-嵌套循环&break和continue使用&死循环
开发语言·前端·python
Lazy_zheng1 小时前
虚拟 DOM 到底是啥?为什么 React 要用它?
前端·javascript·react.js