logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.0
  • Ant Design of React
  • 更新日志
    v5.25.0
  • 如何使用
    • 快速上手
    • 在 Vite 中使用
    • 在 Next.js 中使用
      Updated
    • 在 Umi 中使用
    • 在 Rsbuild 中使用
    • 在 Farm 中使用
    • 使用 Refine
  • 进阶使用
    • 定制主题
    • 样式兼容
    • 服务端渲染
    • 使用 CSS 变量
      New
    • 使用自定义日期库
    • 国际化
    • 通用属性
    • React 19 兼容
      New
  • 迁移
    • 从 v4 到 v5
    • 从 Less 变量到 Design Token
  • 其他
    • 社区精选组件
    • 贡献指南
    • FAQ

React 19 兼容

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

兼容接口

antd v5 默认兼容 React 16 ~ 18 版本,对于 React 19 版本,可以使用以下兼容方法进行适配。该兼容方式以及接口将在 v6 被移除。

React 19 兼容问题

由于 React 19 调整了 react-dom 的导出方式,导致 antd 无法直接使用 ReactDOM.render 方法。因而使用 antd 会遇到以下问题:

  • 波纹特效无法正常工作
  • Modal、Notification、Message 等组件的静态方法无效

因而需要通过兼容配置,使 antd 在 React 19 中正常工作。

兼容方式

以下方法任选其一,其中优先推荐使用兼容包。

兼容包

安装兼容包

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
bash
npm install @ant-design/v5-patch-for-react-19 --save

在应用入口处引入兼容包

tsx
import '@ant-design/v5-patch-for-react-19';

unstableSetRender

再次提醒,默认情况下,请优先使用兼容包。除非对于 umd、微应用等特殊场景,才使用 unstableSetRender 方法。unstableSetRender 为底层注册方法,允许开发者修改 ReactDOM 的渲染方法。在你的应用入口处写入:

js
import { unstableSetRender } from 'antd';
import { createRoot } from 'react-dom/client';
unstableSetRender((node, container) => {
container._reactRoot ||= createRoot(container);
const root = container._reactRoot;
root.render(node);
return async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
root.unmount();
};
});