mirror of
https://github.com/ant-design/ant-design.git
synced 2025-07-24 23:46:51 +08:00
docs: Update migration-v4 doc (#21429)
* Update migration-v4.zh-CN.md * Update migration-v4.en-US.md * Update migration-v4.zh-CN.md * Update migration-v4.zh-CN.md * Update migration-v4.en-US.md * Update migration-v4.en-US.md * Update migration-v4.zh-CN.md * Update migration-v4.en-US.md * Update migration-v4.zh-CN.md * Update migration-v4.en-US.md * Update migration-v4.zh-CN.md * Update migration-v4.zh-CN.md * Update migration-v4.en-US.md * Update migration-v4.zh-CN.md Co-authored-by: 偏右 <afc163@gmail.com>
This commit is contained in:
二货机器人
GitHub
parent
1b15ccacc8
commit
8738e1a623
@ -74,22 +74,22 @@ const Demo = () => (
|
||||
It will be imported on demand in v4:
|
||||
|
||||
```diff
|
||||
import { Button } from 'antd';
|
||||
import { Button } from 'antd';
|
||||
|
||||
// tree-shaking supported
|
||||
// tree-shaking supported
|
||||
- import { Icon } from 'antd';
|
||||
+ import { SmileOutlined } from '@ant-design/icons';
|
||||
|
||||
const Demo = () => (
|
||||
<div>
|
||||
- <Icon type="smile" />
|
||||
+ <SmileOutlined />
|
||||
<Button icon={<SmileOutlined />} />
|
||||
</div>
|
||||
);
|
||||
const Demo = () => (
|
||||
<div>
|
||||
- <Icon type="smile" />
|
||||
+ <SmileOutlined />
|
||||
<Button icon={<SmileOutlined />} />
|
||||
</div>
|
||||
);
|
||||
|
||||
// or directly import
|
||||
import SmileOutlined from '@ant-design/icons/SmileOutlined';
|
||||
// or directly import
|
||||
import SmileOutlined from '@ant-design/icons/SmileOutlined';
|
||||
```
|
||||
|
||||
You will still be able to continue using the compatibility pack:
|
||||
@ -108,7 +108,10 @@ const Demo = () => (
|
||||
|
||||
#### Component refactoring
|
||||
|
||||
- Form rewrite. No need to use `Form.create`. See [here](/components/form/v3) for migration documentation.
|
||||
- Form rewrite.
|
||||
- No need to use `Form.create`.
|
||||
- Nest fields definition changes from `'xxx.yyy'` to `['xxx', 'yyy']`.
|
||||
- See [here](/components/form/v3) for migration documentation.
|
||||
- DatePicker rewrite
|
||||
- Provide the `picker` property for selector switching.
|
||||
- Range selection can now select start and end times individually.
|
||||
@ -117,7 +120,20 @@ const Demo = () => (
|
||||
- The Grid component uses flex layout.
|
||||
- Button's `danger` is now treated as a property instead of a button type.
|
||||
- Input, Select set `value` to `undefined` is uncontrolled mode now.
|
||||
- Table will keep at least one column even if `columns` is empty.
|
||||
- Table rewrite.
|
||||
- will keep at least one column even if `columns` is empty.
|
||||
- Nest `dataIndex` definition changes from `'xxx.yyy'` to `['xxx', 'yyy']`.
|
||||
|
||||
```diff
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
title: 'Age',
|
||||
- dataIndex: 'user.age',
|
||||
+ dataIndex: ['user', 'age'],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
## Start upgrading
|
||||
|
||||
@ -139,11 +155,11 @@ yarn global add @ant-design/codemod-v4
|
||||
antd4-codemod src
|
||||
```
|
||||
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QdcbQoLC-cQAAAAAAAAAAABkARQnAQ" alt="codemod running" width="720" />
|
||||
|
||||
For parts that cannot be modified automatically, codemod will prompt on the command line, and it is recommended to modify them manually as prompted. After modification, you can run the above command repeatedly to check.
|
||||
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KQwWSrPirlUAAAAAAAAAAABkARQnAQ" alt="contains an invalid icon" width="720" />
|
||||
|
||||
> Note that codemod cannot cover all scenarios, and it is recommended to check for incompatible changes one by one.
|
||||
|
||||
|
||||
@ -74,22 +74,22 @@ const Demo = () => (
|
||||
4.0 中会采用按需引入的方式：
|
||||
|
||||
```diff
|
||||
import { Button } from 'antd';
|
||||
import { Button } from 'antd';
|
||||
|
||||
// tree-shaking supported
|
||||
// tree-shaking supported
|
||||
- import { Icon } from 'antd';
|
||||
+ import { SmileOutlined } from '@ant-design/icons';
|
||||
|
||||
const Demo = () => (
|
||||
<div>
|
||||
- <Icon type="smile" />
|
||||
+ <SmileOutlined />
|
||||
<Button icon={<SmileOutlined />} />
|
||||
</div>
|
||||
);
|
||||
const Demo = () => (
|
||||
<div>
|
||||
- <Icon type="smile" />
|
||||
+ <SmileOutlined />
|
||||
<Button icon={<SmileOutlined />} />
|
||||
</div>
|
||||
);
|
||||
|
||||
// or directly import
|
||||
import SmileOutlined from '@ant-design/icons/SmileOutlined';
|
||||
// or directly import
|
||||
import SmileOutlined from '@ant-design/icons/SmileOutlined';
|
||||
```
|
||||
|
||||
你将仍然可以通过兼容包继续使用：
|
||||
@ -108,7 +108,10 @@ const Demo = () => (
|
||||
|
||||
#### 组件重构
|
||||
|
||||
- Form 重写，不再需要 `Form.create`，迁移文档请查看[此处](/components/form/v3)。
|
||||
- Form 重写
|
||||
- 不再需要 `Form.create`。
|
||||
- 嵌套字段支持从 `'xxx.yyy'` 改成 `['xxx', 'yyy']`。
|
||||
- 迁移文档请查看[此处](/components/form/v3)。
|
||||
- DatePicker 重写
|
||||
- 提供 `picker` 属性用于选择器切换。
|
||||
- 范围选择现在可以单独选择开始和结束时间。
|
||||
@ -117,7 +120,21 @@ const Demo = () => (
|
||||
- Grid 组件使用 flex 布局。
|
||||
- Button 的 `danger` 现在作为一个属性而不是按钮类型。
|
||||
- Input、Select 的 `value` 为 `undefined` 时改为非受控状态。
|
||||
- Table 在没有 `columns` 时仍然会保留一列。
|
||||
- Table 重写
|
||||
- 在没有 `columns` 时仍然会保留一列。
|
||||
- 嵌套 `dataIndex` 支持从 `'xxx.yyy'` 改成 `['xxx', 'yyy']`。
|
||||
|
||||
```diff
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
title: 'Age',
|
||||
- dataIndex: 'user.age',
|
||||
+ dataIndex: ['user', 'age'],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
## 开始升级
|
||||
|
||||
@ -139,11 +156,11 @@ yarn global add @ant-design/codemod-v4
|
||||
antd4-codemod src
|
||||
```
|
||||
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QdcbQoLC-cQAAAAAAAAAAABkARQnAQ" alt="codemod running" width="720" />
|
||||
|
||||
对于无法自动修改的部分，codemod 会在命令行进行提示，建议按提示手动修改。修改后可以反复运行上述命令进行检查。
|
||||
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KQwWSrPirlUAAAAAAAAAAABkARQnAQ" alt="contains an invalid icon" width="720" />
|
||||
|
||||
> 注意 codemod 不能涵盖所有场景，建议还是要按不兼容的变化逐条排查。
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user