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 />
    </>
  );
}
相关推荐
深蓝电商API1 天前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx1 天前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶1 天前
webpack学习
前端·学习·webpack
excel1 天前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端
光影少年1 天前
vue打包优化方案都有哪些?
前端·javascript·vue.js
硅谷工具人1 天前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
β添砖java1 天前
CSS网格布局
前端·css·html
木易 士心1 天前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
程序员博博1 天前
概率与决策 - 模拟程序让你在选择中取胜
前端