antd v3升级至v4

124 阅读1分钟

步骤如下:

  1. 安装最新版本antd,升级项目 React 16.12.0 以上
  2. Form及对应Icon引用路径变更为@ant-design/compatible(适配class组件),若是hooks组件可直接引用antd。后期升级变更为引用antd需要将class组件升级为hooks
  3. @ant-design/compatible引用后会出现样式错乱,需要将对应样式文件一起引入
import { Form, SmileOutlined, Icon } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.less';
  1. 使用@ant-design/compatible的form 类名调整,如ant-form-item==>ant-legacy-form-item,需要做兼容
  2. 若表单设置的Grid样式不生效,报如下错误,需要手动引入
import 'antd/es/grid/style/css';
  1. Form表单方法废弃

废弃: Form.create ==> Form.useForm()

name层级嵌套 'a.b' ===> ['a', 'b']

validateTrigger

defaultValue ==> initValue

initialValues优先级高于initialValue

  1. DatePicker

交互重做,面板和输入框分离,范围选择现可单独选择开始和结束时间

ant-calendar-date ==> ant-picker-cell-inner

  1. Table 默认背景颜色从透明修改为白色。

Table 移除了在 v3 中废弃的 onRowClickonRowDoubleClickonRowMouseEnteronRowMouseLeave 等方法。

dataIndex 从支持路径嵌套如 user.age ==> ['user', 'age']

  1. Tabs 火柴棍样式缩短为和文字等长。

  2. Tabs 交互重做,DOM 结构改变。

  3. moment.js ==> dayjs

参考官方文档

参考官方文档-Form

参考官方文档-Table