antd从v3升级到v4
因为项目需求,需要对antd进行一个升级,下面我简述下我升级的步骤1. 安装最新版本antd,升级项目 React 16.12.0 以上2. 若项目中使用了Form表单/Icon组件 安装@ant-design/compatible,然后在之前使用Icon/Form组件的地方使用如下引用方式就可以了,这个只是个兼容性办法,项目可以正常运行,控制台会有警告,等以后有时间了再切换成antd的组件imp
因为项目需求,需要对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
,请直接设置 Optionvalue
属性。 -
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
更多推荐
所有评论(0)