因为项目需求,需要对antd进行一个升级,下面我简述下我升级的步骤

1. 安装最新版本antd,升级项目 React 16.12.0 以上

2. 若项目中使用了Form表单/Icon组件 安装@ant-design/compatible,然后在之前使用Icon/Form组件的地方使用如下引用方式就可以了,这个只是个兼容性办法,项目可以正常运行,控制台会有警告,等以后有时间了再切换成antd的组件

import { Form, Icon } from '@ant-design/compatible'

3. 使用@ant-design/compatible后就会存在样式错乱问题,需要我们手动去引用样式文件

@import '@ant-design/compatible/assets/index.less';

4. 如果之前使用antd form 的classname修改了样式,需要注意,使用@ant-design/compatible的form classname做了调整类名上都加上了legacy(eg:ant-form-explain==>ant-legacy-form-explain)

5. 若表单设置的Grid样式不生效,报如下错误,需要手动引入以下文件

import 'antd/es/grid/style/css';

6. antd4重构了部分组件,如果项目中使用了如下组件的需要注意下

  • Form 重写

    • 不再需要 Form.create

    • 嵌套字段支持从 'xxx.yyy' 改成 ['xxx', 'yyy']

    • validateTrigger 不再收集字段值。

    • 迁移文档请查看此处

  • DatePicker 重写

    • 提供 picker 属性用于选择器切换。

    • 范围选择现在可以单独选择开始和结束时间。

    • onPanelChange 在面板值变化时也会触发。

    • 自定义单元格样式的类名从 ant-calendar-date 改为 ant-picker-cell-inner

  • Tree、Select、TreeSelect、AutoComplete 重新写

    • 使用虚拟滚动。

    • onBlur 时不再修改选中值,且返回 React 原生的 event 对象。

      • 如果你在使用兼容包的 Form 且配置了 validateTrigger 为 onBlur,请改至 onChange 以做兼容。

    • AutoComplete 不再支持 optionLabelProp,请直接设置 Option value 属性。

    • AutoComplete 选项与 Select 对齐,请使用 options 代替 dataSource

    • Select 移除 dropdownMenuStyle 属性。

    • 如果你需要设置弹窗高度请使用 listHeight 来代替 dropdownStyle 的高度样式。

    • filterOption 第二个参数直接返回原数据,不在需要通过 option.props.children 来进行匹配。

    • Tree、TreeSelect 同时指定 title 和 label 的时候,会选择显示 label。为了 labelInValue 行为一致进行了该调整。新行为(在第一个节点展示 'label'),旧行为(在第一个节点展示 'title')。

    • Tree 传入内容采用 treeData 属性,来代替 TreeNode 方式,TreeNode 依然可用,但是会在控制台抛出警告。

  • Grid 组件使用 flex 布局。

  • Button 的 danger 现在作为一个属性而不是按钮类型。

  • Input、Select 的 value 为 undefined 时改为非受控状态。

  • Table 重写

    • 在没有 columns 时仍然会保留一列。

    • 嵌套 dataIndex 支持从 'xxx.yyy' 改成 ['xxx', 'yyy']

  • Pagination 重写

    • 自 4.1.0 起大于 50 条数据默认会展示 pageSize 切换器,这条规则同样会运用于 Table 上。

    • onChange 方法在 pageSize 值改变时也会触发。

  • Tabs 重写(4.3.0

    • Dom 结构变化,如有覆盖样式需要仔细检查。

    • 横向滚动交互变化,onPrevClick 和 onNextClick 不再工作。

  • less 变量变化,如 DatePicker/TimePicker/Calendar 相关变量已全部重构,又如 @btn-padding-base 等进行了重命名,具体变化请自行对比 3.x 变量 和 4.x 变量

7. table的rowSelection新增了几个配置项,接口请求的分页数据需注意若要保留切换页码前的选中项需要设置preserveSelectedRowKeys:true

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐