antd从v3升级到v4

因为项目需求，需要对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