Antd 3 To 4 升级排雷

从 v3 到 v4

随着 react 改版， antd4 升级，对3版本的写法有着非常大的更改。在项目后续开发中，如果不尽快做 antd4 的升级处理，后期维护和新开发组件的成本会极大提升。因此，决定迅速解决过去写法的问题，将 antd4 快准狠的升级完毕。

准备工作

这一步可以不做

1. Npm install 初始化项目
2. Npm upgrade antd@3.26.18 –更新 antd包到3版的终极版本
3. Npm run start –跑一下项目，观察是否有问题

升级 antd4
# 通过 npx 直接运行
npm i -g @ant-design/codemod-v4

# 或者全局安装
# 使用 npm
npm i -g @ant-design/codemod-v4
# 或者使用 yarn
yarn global add @ant-design/codemod-v4

# 运行
antd4-codemod src
复制代码

解决问题

1. 将 antd4 自动化脚本运行完成后，会有提示告知是否需要手动修改
2. 转换需要依赖 @ant-design/icons 和 @ant-design/compatible
3. Ant-design 的组件需要依赖 react 和 react-dom 16.9.0 以上，所以要升级 react 和 react-dom
4. 最后升级 antd 版本

npm install react-dom@16.9.0
# 根据提示安装 @ant-design/icons 和 @ant-design/compatible 对应版本
npm install @ant-design/icons
npm install @ant-design/compatible
npm install antd@4.15.0
复制代码

或者可以通过修改 package.json 的方式，重新初始化 node_modules 包

运行项目

运行项目会出现的样式问题，存在问题的例子

这是因为 ant-design 的css 没有包含在 loader 的文件里，通过将@ant-design 添加到 include 里解决

2.Input 样式调整，之前的样式在 .ant-input 可以包括整个 input 组件， 升级后 .ant-input 是不包含搜索icon 的，所以将原来的样式调整到 .ant-input-affix-wrapper

3.Antd 默认背景颜色从透明修改为白色了，并且table的层级去掉 .ant-table-body 并且添加了 .ant-table-container

4.Table 的 dataIndex 写法更改

data.name v3.0 => [‘data’, ‘name’]

data[0].name v4.0 => [‘data’, 0, ‘name’]

5.select 等组件都使用了虚拟渲染技术，通过 virtual 配合 listHeight 来控制

Antd Typescript问题

• SelectProps

需要带上，不好解决可以先

• Form相关类型

可能引用路径是antd3，需要手动修改成antd4兼容版本路径