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 />
    </>
  );
}
相关推荐
LilyCoder6 分钟前
HTML5二十四节气网站源码
前端·javascript·html·html5
Bruce_Liuxiaowei19 分钟前
跨站脚本攻击(XSS)高级绕过技术与防御方案
前端·网络安全·xss
EF@蛐蛐堂33 分钟前
【vue3】v-model 的 “新玩法“
前端·javascript·vue.js
两个月菜鸟43 分钟前
vue+微信小程序 五角星
前端·vue.js·微信小程序
GISer_Jing2 小时前
React手撕组件和Hooks总结
前端·react.js·前端框架
Warren986 小时前
Lua 脚本在 Redis 中的应用
java·前端·网络·vue.js·redis·junit·lua
mCell6 小时前
JavaScript 运行机制详解:再谈 Event Loop
前端·javascript·浏览器
帧栈10 小时前
开发避坑指南(27):Vue3中高效安全修改列表元素属性的方法
前端·vue.js
max50060010 小时前
基于桥梁三维模型的无人机检测路径规划系统设计与实现
前端·javascript·python·算法·无人机·easyui
excel11 小时前
使用函数式封装绘制科赫雪花(Koch Snowflake)
前端