当前位置：首页 > java >正文

antd pro4 升级 antd5

java 2025/4/30 12:33:22

升级前后环境（ant-design-pro：4.5.0）

原环境：umi：3.5 react：17.0.2 antd：4 node：16.20.2

升级后环境：umi：3.5 react：16.9.0 antd：5.24.8 node：16.20.2

为啥react版本变低了：用ai告诉我 react 16.9.0和antd 5比较兼容，我就信了

升级antd5（主要是按照官网操作，6后面的步骤是我自己项目独有的我会列出来）

官方文档：从 v4 到 v5 - Ant Design

1、兼容性调整（取至官网）

不再支持 IE 浏览器。

组件 API 调整

组件弹框的 classname API 统一为 popupClassName，dropdownClassName 等类似 API 都会被替换。
- AutoComplete 组件
- Cascader 组件
- Select 组件
- TreeSelect 组件
- TimePicker 组件
- DatePicker 组件
- Mentions 组件
```
import { Select } from 'antd';const App: React.FC = () => (<Select
-     dropdownClassName="my-select-popup"
+     popupClassName="my-select-popup"/>);export default App;
```

组件弹框的受控可见 API 统一为 open，visible 等类似 API 都会被替换。

Drawer 组件 visible 变为 open。
Modal 组件 visible 变为 open。
Dropdown 组件 visible 变为 open。
Tooltip 组件 visible 变为 open。
Tag 组件 visible 已移除。
Slider 组件 tooltip 相关 API 收敛到 tooltip 属性中。
Table 组件 filterDropdownVisible 变为 filterDropdownOpen。

import { Modal, Tag, Table, Slider } from 'antd';const App: React.FC = () => {const [visible, setVisible] = useState(true);return (<>
-       <Modal visible={visible}>content</Modal>
+       <Modal open={visible}>content</Modal>
-       <Tag visible={visible}>tag</Tag>
+       {visible && <Tag>tag</Tag>}<Tabledata={[]}columns={[{title: 'Name',dataIndex: 'name',
-             filterDropdownVisible: visible,
+             filterDropdownOpen: visible,}]}/>
-       <Slider tooltipVisible={visible} />
+       <Slider tooltip={{ open: visible }} /></>);}export default App;

getPopupContainer: 所有的 getPopupContainer 都需要保证返回的是唯一的 div。React 18 concurrent 下会反复调用该方法。
Upload List dom 结构变化。#34528
Notification
- 静态方法不再允许在 open 中动态设置 prefixCls maxCount top bottom getContainer，Notification 静态方法现在将只有一个实例。如果需要不同配置，请使用 useNotification。
- close 改名为 destroy，和 message 保持一致。
Drawer style 和 className 迁移至 Drawer 弹层区域上，原属性替换为 rootClassName 和 rootStyle。
4.x 中已经废弃的 message.warn 现在被彻底移除，请使用 message.warning 代替。

组件重构与移除

移除 locale-provider 目录。LocaleProvider 在 v4 中已移除，请使用 ConfigProvider 替代。
移除 Comment 组件，移至 @ant-design/compatible 中维护。

移除 PageHeader 组件，移至 @ant-design/pro-components 中维护。

- import { PageHeader, Comment } from 'antd';
+ import { Comment } from '@ant-design/compatible';
+ import { PageHeader } from '@ant-design/pro-components';// 如果是蚂蚁内网用户建议从 @alipay/tech-ui 引入// import { PageHeader } from '@alipay/tech-ui';const App: React.FC = () => (<><PageHeader /><Comment /></>);export default App;

BackTop 组件在 5.0.0 中废弃，移至 FloatButton 悬浮按钮中。如需使用，可以从 FloatButton 中引入。

- import { BackTop } from 'antd';
+ import { FloatButton } from 'antd';const App: React.FC = () => (<>
-     <BackTop />
+     <FloatButton.BackTop /></>);export default App;

2、先删除node_modules和.umi

3、通过 git 保存你的代码，然后按照上述文档进行依赖安装

npm install --save antd@5.x

4、如果你需要使用 v4 废弃组件如 `Comment`、`PageHeader`，请安装 `@ant-design/compatible` 与 `@ant-design/pro-components` 做兼容：

npm install --save @ant-design/compatible@v5-compatible-v4
npm install --save @ant-design/pro-components

5、运行官方的 codemod cli 工具

# 使用 npx 直接运行
npx -p @ant-design/codemod-v5 antd5-codemod src# 或者使用 pnpm 直接运行
pnpm --package=@ant-design/codemod-v5 dlx antd5-codemod src

6、移除原LESS样式后报错（也是官网技术调整弃用LESS后的变种）

@screen-xs找不到

@media (max-width: @screen-xs) {^
Variable @screen-xs is undefinedin D:\react-project\ecpm-web\src\global.less (line 33, column 19)at processResult (D:\react-project\ecpm-web\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:115794:19)at D:\react-project\ecpm-web\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:115900:5at D:\react-project\ecpm-web\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:35125:11at D:\react-project\ecpm-web\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:34977:18at context.callback (D:\react-project\ecpm-web\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:34850:13)@ ./src/.umi/umi.ts 7:17-41

找到对应的文件（被官方工具给注释掉了）

// @import '~antd/es/style/themes/default.less';
// @import '~antd/es/style/mixins/clearfix.less';

解决方法：（找到以前的less文件复制一份放到本项目src目录下）

~antd/es/style/themes/default.less 的意思就是 node_modules 目录下的antd/es/style/themes 目录下default.less文件

当然你在antd 5的目录下找不到，所以你需要重新下一个 antd 4 的 node_modules 然后复制一份到你自己的项目里，通过 @import '../../oldLess/themes/default.less';导入即可，clearfix.less或者其他自己导入的同理

7、项目里的LESS全部改了一遍后还是报错

报错为：@import (reference) ‘~antd/es/style/themes/index.less’; 找不到，一看报错文件是在 node_modules 目录下，那肯定是兼容性问题，需要升级组件的版本了

再删除 node_modules 和 .umi 目录

看了下package.json，找一找ant-design发现了以下版本（只罗列了需要升级的组件）
{"dependencies": {"@ant-design/charts": "^1.4.3","@ant-design/icons": "^4.0.0","@ant-design/pro-card": "^1.14.5","@ant-design/pro-descriptions": "^1.9.18","@ant-design/pro-form": "^2.29.0","@ant-design/pro-layout": "^6.9.0","@ant-design/pro-table": "^2.50.0",}
}
使用npm命令查看各个组件最新的版本信息，然后替换为最新的版本，然后就可以 npm install 了
npm view @ant-design/charts