管理后台antd3升级antd4
官方升级文档https://ant.design/docs/react/migration-v4-cn
一、升级准备
升级react到16.14.0：yarn add react@16.14.0
升级react-dom到16.14.0：yarn add react-dom@16.14.0
新版antd4：yarn add antd@4.16.12
兼容antd3的Icon与Form过渡包：yarn add @ant-design/compatible
二、执行
npx -p @ant-design/codemod-v4 antd4-codemod src
三、自动兼容antd3的Icon
antd3的用法
import { Icon } from 'antd';
antd4为了实现Icon按需加载，使用新的写法
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
四、自动兼容antd3的Form
1、antd3与antd4的区别，思想上从高阶组件到普通组件转变
antd4不需要Form.create包装
antd4校验成功后的values通过onFinish直接获取
antd4不需要getFieldDecorator包装，name rules initialValues 作为组件属性传递
2、antd3的用法
import React from "react";
import { Form, Input, Button } from "antd";
const Demo = ({ form }) => {
const { getFieldDecorator, validateFields } = form;
const handleSubmit = e => {
e.preventDefault();
validateFields((err, values) => {
if (!err) {
console.log(values);
}
});
};
return (
);
};
export default Form.create()(Demo);
3、antd4新的用法
import React from "react";
import { Form, Input, Button } from "antd";
const Demo = () => {
const onFinish = values => {
console.log(values);
};
return (
);
};
export default Demo;
五、手动兼容antd3的Table
1、scroll={{ x: 'max-content', y: document.body.clientHeight }}
antd3如果不定义y，空数据时，会形成头部滚动条，antd4解决了这个bug
2、antd4默认width是100%，会造成表格挤压，建议使用x: 'max-content' 或指定宽度
3、升级antd4后，统一去掉y: document.body.clientHeight，
4、目前table每页默认10条太少了，升级antd4后，建议默认20条
5、自4.1.0起大于 50 条数据默认会展示 pageSize 切换器，有些antd3页面不支持分页，添加showSizeChanger: false
pagination: {
current: 1,
pageSize: 30,
showSizeChanger: false, // 有些antd3页面不支持分页，添加showSizeChanger
}
6、antd4的onChange 方法在 pageSize 值改变时也会触发，会造成两次请求，原先的两个回调onChange、onShowSizeChange需要改成一个onChange
7、排序问题，antd4升级后onChange回调第三个参数sorter的columnKey默认undefined，而field有值，需要赋值
handleTableChange = (pagination, filters, sorter) => {
sorter.columnKey = sorter.field; // antd4升级columnKey默认undefined，field有值
if (sorter.order === false) sorter = {}; // antd4升级兼容历史需求
8、表格行是否可选择antd4增加了preserveSelectedRowKeys配置，默认是false，批量删除时建议false，如果切换页面需要保留key，需要添加preserveSelectedRowKeys: true
六、手动兼容antd3的Tree
1、antd3支持Tree嵌套TreeSelect.TreeNode，antd4不支持，需要改为Tree.TreeNode
2、组织结构树Tree，部门width有可能超长，需要添加滚动条
.staffListDeptTree {
overflow-x: auto; // 横向滚动
white-space: nowrap; // 不换行
}
七、手动兼容antd3的TreeSelect
1、antd3的TreeSelect的value支持匹配number与string，antd4必须类型一致
2、antd3的TreeSelect的value为空时可赋值null，antd4不能赋值null，可以赋值空数组[]
3、antd4使用虚拟滚动，造成宽度不会自动适应，关闭虚拟滚动
八、手动兼容Upload上传
antd4官方文档有个bug，实际结果传入blob对象时，会转化为新的File对象，造成一些属性丢失
需要自己包装成File
file = new File([file], file.name, { type: file.type });
相关