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 />
</>
);
}