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 />
    </>
  );
}
相关推荐
十二AI编程5 分钟前
MiniMax M2.1 实测,多语言编程能力表现出色!
前端
鹿野素材屋25 分钟前
技术闲聊:为什么网游会在固定时间点,刷出固定的道具?
前端·网络·unity
同学8079629 分钟前
🔥🔥高效易用的 Vue3 公告滚动组件:打造丝滑的内容滚动体验(附源码)
前端·vue.js
编程修仙30 分钟前
第二篇 Vue指令
前端·javascript·vue.js·前端框架
frontend丶CV35 分钟前
useMemo
前端·react.js
明月_清风36 分钟前
基于 node-rtsp-stream 的 Web 直播方案详解
前端
DEMO派39 分钟前
前端处理用户离开当前页面的方案及对比解析
前端
LFly_ice40 分钟前
Next-4-路由导航
开发语言·前端·javascript
chilavert31841 分钟前
技术演进中的开发沉思-267 Ajax:拖放功能
前端·javascript·ajax