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 />
    </>
  );
}
相关推荐
前端那点事几秒前
Vue3 超全复盘!30+前端高频核心知识点(开发+面试全覆盖)
前端·vue.js
幼儿园技术家41 分钟前
为什么 SSR 一定会有 hydration mismatch?
前端
FlyWIHTSKY43 分钟前
Vue 3 中 RouteRecord 详解(Vue Router 4)
前端·javascript·vue.js
yingyima1 小时前
用 cron 定时发送邮件报告:实战案例详解
前端
GAMC1 小时前
从 “凭感觉写代码” 到 “按规范做开发”:OpenSpec 让 AI 编程回归工程化
前端·人工智能
微学AI1 小时前
Claude-Code-python 前端改造项目工作流程详解
开发语言·前端·python
清汤饺子2 小时前
【译】我的 AI 进阶之路:从怀疑到深度整合
前端·javascript·后端
@菜菜_达2 小时前
Vue生命周期
前端·javascript·vue.js
每天吃饭的羊2 小时前
UMD和IIfe
开发语言·前端·javascript
前端那点事2 小时前
Vue线上代码调试全攻略(安全无侵入,新手也能上手)
前端·vue.js