Ant Design 4.0
正式版于 2 月 28 日提前发布,本文将帮助你从 antd 3.x
版本升级到 antd 4.x
版本。
1.5
(21px
) 调整为 1.5715
(22px
)。4px
改为 2px
。@blue-1: #E6F7FF
,对应 hover
颜色改为 @gray-2: #FAFAFA
。@red-5: #F5222D
改为 @red-5: #FF4D4F
。#E8E8E8
改为 #F0F0F0
。ConfigProvider
替代。Mentions
替代。iconType
属性,请使用 icon
替代。iconType
属性,请使用 icon
替代。form
现可由 Form.useForm
获取。id
属性,请使用 htmlFor
替代。setContentRef
属性,请使用 ref
替代。allowEmpty
属性,请使用 allowClear
替代。afterClose
属性,请使用 onClose
替代。noHovering
属性,请使用 hoverable
替代。vertical
属性,请使用 dotPosition
替代。wrapClassName
属性,请使用 className
替代。autosize
属性,请使用 autoSize
替代。offset
属性,请使用 offsetTop
替代。onSearchChange
属性,请使用 onSearch
替代。body
属性,请使用 children
替代。lazy
属性,它并没有起到真正的优化效果。combobox
模式,请使用 AutoComplete
替代。在 antd@3.9.0
中,我们引入了 svg 图标(为何使用 svg 图标?)。使用了字符串命名的图标 API 无法做到按需加载,因而全量引入了 svg 图标文件,这大大增加了打包产物的尺寸。在 4.0 中,我们调整了图标的使用 API 从而支持 tree shaking,减少 antd 默认包体积约 150 KB(Gzipped)。
旧版 Icon 使用方式将被废弃:
import { Icon, Button } from 'antd';
const Demo = () => (
<div>
<Icon type="smile" />
<Button icon="smile" />
</div>
);
4.0 中会采用按需引入的方式:
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>
);
// or directly import
import SmileOutlined from '@ant-design/icons/SmileOutlined';
你将仍然可以通过兼容包继续使用:
import { Button } from 'antd';
import { Icon } from '@ant-design/compatible';
const Demo = () => (
<div>
<Icon type="smile" />
<Button icon="smile" />
</div>
);
Form.create
。'xxx.yyy'
改成 ['xxx', 'yyy']
。picker
属性用于选择器切换。onPanelChange
在面板值变化时也会触发。ant-calendar-date
改为 ant-picker-cell-inner
。onBlur
时不再修改选中值。dropdownMatchSelectWidth
不再自动适应内容宽度,请用数字设置下拉宽度。optionLabelProp
,请直接设置 Option value
属性。danger
现在作为一个属性而不是按钮类型。value
为 undefined
时改为非受控状态。columns
时仍然会保留一列。dataIndex
支持从 'xxx.yyy'
改成 ['xxx', 'yyy']
。<Table
columns={[
{
title: 'Age',
- dataIndex: 'user.age',
+ dataIndex: ['user', 'age'],
},
]}
/>
你可以手动对照上面的列表逐条检查代码进行修改,另外,我们也提供了一个 codemod cli 工具 @ant-design/codemod-v4 以帮助你快速升级到 v4 版本。
在运行 codemod cli 前,请先提交你的本地代码修改。
# 通过 npx 直接运行
npx -p @ant-design/codemod-v4 antd4-codemod src
# 或者全局安装
# 使用 npm
npm i -g @ant-design/codemod-v4
# 或者使用 yarn
yarn global add @ant-design/codemod-v4
# 运行
antd4-codemod src
对于无法自动修改的部分,codemod 会在命令行进行提示,建议按提示手动修改。修改后可以反复运行上述命令进行检查。
注意 codemod 不能涵盖所有场景,建议还是要按不兼容的变化逐条排查。
@ant-design/codemod-v4
会帮你迁移到 antd v4, 废弃的组件则通过 @ant-design/compatible
保持运行, 一般来说你无需手动迁移。下方内容详细介绍了整体的迁移和变化,你也可以参照变动手动修改。
Form
和 Mention
组件通过 @ant-design/compatible
包引入- import { Form, Input, Button, Mention } from 'antd';
+ import { Form, Mention } from '@ant-design/compatible';
+ import '@ant-design/compatible/assets/index.css';
+ import { Input, Button } from 'antd';
ReactDOM.render( (
<div>
<Form>
{getFieldDecorator('username')(<Input />)}
<Button>Submit</Button>
</Form>
<Mention
style={{ width: '100%' }}
onChange={onChange}
defaultValue={toContentState('@afc163')}
defaultSuggestions={['afc163', 'benjycui']}
onSelect={onSelect}
/>
</div>
);
**注意:**从
@ant-design/compatible
引入的老版本 Form 组件,样式类名会从.ant-form
变成.ant-legacy-form
,如果你对其进行了样式覆盖,也需要相应修改。
@ant-design/icons
替换字符串类型的 icon
属性值 import { Avatar, Button, Result } from 'antd';
+ import { QuestionOutlined, UserOutlined } from '@ant-design/icons';
ReactDOM.render(
<div>
- <Button type="primary" shape="circle" icon="search" />
+ <Button type="primary" shape="circle" icon={SearchOutlined} />
- <Avatar shape="square" icon="user" />
+ <Avatar shape="square" icon={UserOutlined} />
<Result
- icon="question"
+ icon={<QuestionOutlined />}
title="Great, we have done all the operations!"
extra={<Button type="primary">Next</Button>}
/>
</div>,
mountNode,
);
@ant-design/icons
中引入- import { Icon, Input } from 'antd';
+ import { Input } from 'antd';
+ import Icon, { CodeFilled, SmileOutlined, SmileTwoTone } from '@ant-design/icons';
const HeartSvg = () => (
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
<path d="M923 plapla..." />
</svg>
);
const HeartIcon = props => <Icon component={HeartSvg} {...props} />;
ReactDOM.render(
<div>
- <Icon type="code" theme="filled" />
+ <CodeFilled />
- <Icon type="smile" theme="twoTone" twoToneColor="#eb2f96" />
+ <SmileTwoTone twoToneColor="#eb2f96" />
- <Icon type="code" theme={props.fill ? 'filled' : 'outlined'} />
+ <LegacyIcon type="code" theme={props.fill ? 'filled' : 'outlined'} />
<HeartIcon />
<Icon viewBox="0 0 24 24">
<title>Cool Home</title>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</Icon>
<Input suffix={<SmileOutlined />} />
</div>,
mountNode,
);
- import { LocaleProvider } from 'antd';
+ import { ConfigProvider } from 'antd';
ReactDOM.render(
- <LocaleProvider {...yourConfig}>
+ <ConfigProvider {...yourConfig}>
<Main />
- </LocaleProvider>
+ </ConfigProvider>
mountNode,
);
Modal.method()
中字符串 icon 属性的调用转换成从 @ant-design/icons
中引入 import { Modal } from 'antd';
+ import { AntDesignOutlined } from '@ant-design/icons';
Modal.confirm({
- icon: 'ant-design',
+ icon: <AntDesignOutlined />,
title: 'Do you Want to delete these items?',
content: 'Some descriptions',
onOk() {
console.log('OK');
},
onCancel() {
console.log('Cancel');
},
});
v4 做了非常多的细节改进和重构,我们尽可能收集了已知的所有不兼容变化和相关影响,但是有可能还是有一些场景我们没有考虑到。如果你在升级过程中遇到了问题,请到 GitHub issues 和 codemod Issues 进行反馈。我们会尽快响应和相应改进这篇文档。
更多内容请查看官方文档:https://ant.design/docs/react/migration-v4-cn