import { Button } from 'antd';
// tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';
const Demo = () => (
<div>
- <Icon type="smile" />
+ <SmileOutlined />
<Button icon={<SmileOutlined />} />
</div>
);
// 或者通过兼容包继续使用
import { Icon } from '@ant-design/compatible'
记录项目antd3升级到antd4过程记录
(具体细节可参考官方文档： 4x.ant.design/docs/react/…)
1.通过 codemod cli 工具 @ant-design/codemod-v4 快速升级到 v4 版本
npm i -g @ant-design/codemod-v4
2.安装 @ant-design/compatible 通过指定 v4-compatible-v3 tag 确认为 v4 兼容 v3 版本
npm install --save @ant-design/compatible@v4-compatible-v3
3.更新antd版本
npm install antd@4.9.0 -S
// 使用npm 安装一直报错
// 改用yarn 安装
yarn add antd@4.9.0
// 安装成功
项目运行在报错
应该是依赖下的有问题，通过npm install 重新安装依赖
依赖安装完成后，项目可以启动起来，但是页面在报错
主要是 antd3和antd4的api不兼容
对于兼容性问题的处理
这边主要先对所有引入的组件做兼容性处理，后面对每个页面每个组件类型进行更改为antd4类型
import { Popconfirm } from 'antd'
------更改为以下---------------------
import { Popconfirm } from '@ant-design/compatible'
因为Form 类型改造比较多，而且牵扯较广，这边将Form类型最后进行处理
-------------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------------------------
4.0 有一些不兼容的变化
废弃的api
移除了 LocaleProvider，请使用 ConfigProvider 替代。
移除了 Mention，请使用 Mentions 替代。
移除了 Alert 的 iconType 属性，请使用 icon 替代。
移除了 Modal.xxx 的 iconType 属性，请使用 icon 替代。
移除了 Form.create 方法，form 现可由 Form.useForm 获取。
移除了 Form.Item 的 id 属性，请使用 htmlFor 替代。
移除了 Typography 的 setContentRef 属性，请使用 ref 替代。
移除了 TimePicker 的 allowEmpty 属性，请使用 allowClear 替代。
移除了 Tag 的 afterClose 属性，请使用 onClose 替代。
移除了 Card 的 noHovering 属性，请使用 hoverable 替代。
移除了 Carousel 的 vertical 属性，请使用 dotPosition 替代。
移除了 Drawer 的 wrapClassName 属性，请使用 className 替代。
移除了 TextArea 的 autosize 属性，请使用 autoSize 替代。
移除了 Affix 的 offset 属性，请使用 offsetTop 替代。
移除了 Transfer 的 onSearchChange 属性，请使用 onSearch 替代。
移除了 Transfer 的 body 属性，请使用 children 替代。
移除了 Transfer 的 lazy 属性，它并没有起到真正的优化效果。
移除了 Select 的 combobox 模式，请使用 AutoComplete 替代。
移除了 Table 的 rowSelection.hideDefaultSelections 属性，请在 rowSelection.selections 中使用 SELECTION_ALL 和 SELECTION_INVERT 替代，自定义选择项。
废弃 Button.Group，请使用 Space 代替。
对于不需重构的组件还是原引入‘antd’
我直接把全部的引入'@ant-design/compatible'， 现在又得改回一波。。。。
组件重构
1.Form 重写
2.DatePicker 重写
3.Tree、Select、TreeSelect、AutoComplete 重新写
4.Grid 组件使用 flex 布局
5.Button 的 danger 现在作为一个属性而不是按钮类型, Button icon的引入方式
import { Button } from 'antd';
// tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';
const Demo = () => (
<div>
- <Icon type="smile" />
+ <SmileOutlined />
<Button icon={<SmileOutlined />} />
</div>
);
// 常用icon: <ExclamationCircleOutlined /> <SaveOutlined />
CloseCircleOutlined LeftOutlined RightOutlined
6.Input、Select 的 value 为 undefined 时改为非受控状态
7.Table 重写
8.Pagination 重写
9.Tabs 重写
10.Modal.method()中得icon引用
import { Modal } from 'antd';
+ import { AntDesignOutlined } from '@ant-design/icons';
Modal.confirm({
- icon: 'ant-design',
+ icon: <AntDesignOutlined />,
项目迁移过程中，对于icon和Form不迁移 其他可直接迁移。
其实在写这篇文档过程中，整体的项目升级还没有完成。主要是由于一直的迭代需求，需要大量的时间，而antd的升级需要另外拉一个分支进行升级改造，且升级过程中需要很多时间。在代码合并过程中也一定会遇到大量的冲突。而且，由于测试人员时间也比较拥挤，得抽出一定得时间来测试该部分。所以这边先进行一个文档留档。
