GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

docs: Update migration docs (#38667) 

* Update migration-v5.zh-CN.md

* Update migration-v5.zh-CN.md

* docs: update doc
pull/38619/head
afc163 2 years ago
committed by GitHub
parent
4b490834a0
commit
83e8554092
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 163 additions and 169 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 165
      docs/react/migration-v5.en-US.md
  2. 167
      docs/react/migration-v5.zh-CN.md

165
docs/react/migration-v5.en-US.md
View File

@ -28,14 +28,14 @@ This document will help you upgrade from antd `4.x` version to antd `5.x` versio
- Replace built-in Moment.js with Dayjs. For more: [Use custom date library](/docs/react/use-custom-date-library/).
- `babel-plugin-import` is no longer supported. CSS-in-JS itself has the ability to import on demand, and plugin support is no longer required. Umi users can remove related configurations.
```diff
// config/config.ts
export default {
antd: {
- import: true,
},
};
```
```diff
// config/config.ts
export default {
antd: {
- import: true,
},
};
```
### Compatibility
@ -44,6 +44,7 @@ export default {
#### Component API adjustment
- The classname API of the component popup box is unified to `popupClassName`, and `dropdownClassName` and other similar APIs will be replaced.
- AutoComplete
- Cascader
- Select
@ -52,20 +53,21 @@ export default {
- DatePicker
- Mentions
```diff
import { Select } from 'antd';
```diff
import { Select } from 'antd';
const App: React.FC = () => (
<Select
- dropdownClassName="my-select-popup"
+ popupClassName="my-select-popup"
/>
);
const App: React.FC = () => (
<Select
- dropdownClassName="my-select-popup"
+ popupClassName="my-select-popup"
/>
);
export default App;
```
export default App;
```
- The controlled visible API of the component popup is unified to `open`, and `visible` and other similar APIs will be replaced.
- Drawer `visible` changed to `open`.
- Modal `visible` changed to `open`.
- Dropdown `visible` changed to `open`.
@ -74,88 +76,84 @@ export default {
- Slider `tooltip` related API converged to `tooltip` property.
- Table `filterDropdownVisible` changed to `filterDropdownOpen`.
```diff
import { Modal, Tag, Table, Slider } from 'antd';
const App: React.FC = () => {
const [visible, setVisible] = useState(true);
return (
<>
- <Modal visible={visible}>content</Modal>
+ <Modal open={visible}>content</Modal>
- <Tag visible={visible}>tag</Tag>
+ {visible && <Tag>tag</Tag>}
<Table
data={[]}
columns={[
{
title: 'Name',
dataIndex: 'name',
- filterDropdownVisible: visible,
+ filterDropdownOpen: visible,
}
]}
/>
- <Slider tooltipVisible={visible} />
+ <Slider tooltip={{ open: visible }} />
</>
);
}
export default App;
```
```diff
import { Modal, Tag, Table, Slider } from 'antd';
const App: React.FC = () => {
const [visible, setVisible] = useState(true);
return (
<>
- <Modal visible={visible}>content</Modal>
+ <Modal open={visible}>content</Modal>
- <Tag visible={visible}>tag</Tag>
+ {visible && <Tag>tag</Tag>}
<Table
data={[]}
columns={[
{
title: 'Name',
dataIndex: 'name',
- filterDropdownVisible: visible,
+ filterDropdownOpen: visible,
}
]}
/>
- <Slider tooltipVisible={visible} />
+ <Slider tooltip={{ open: visible }} />
</>
);
}
export default App;
```
- `getPopupContainer`: All `getPopupContainer` are guaranteed to return a unique div. This method will be called repeatedly under React 18 concurrent mode.
- Dropdown
- The style of the wrapper element has been removed, please use the Space component.
- `prefixCls` of Dropdown.Button changed to `dropdown`.
- Upload List structure changes.
- Upload List structure changes. [#34528](https://github.com/ant-design/ant-design/pull/34528)
- Notification
- Static methods are no longer allowed to dynamically set `prefixCls` `maxCount` `top` `bottom` `getContainer` in `open`, Notification static methods will now have only one instance. If you need a different configuration, use `useNotification`.
- `close` was renamed to `destroy` to be consistent with message.
- Drawer
- `style` & `className` are migrated to Drawer Panel, the original properties are replaced by `rootClassName` and `rootStyle`.
- Drawer `style` & `className` are migrated to Drawer panel node, the original properties are replaced by `rootClassName` and `rootStyle`.
#### Component refactoring and removal
- Move Comment component into `@ant-design/compatible`.
- Move PageHeader component into `@ant-design/pro-components`.
```diff
- import { PageHeader, Comment, Input, Button } from 'antd';
+ import { Comment } from '@ant-design/compatible';
+ import { PageHeader } from '@ant-design/pro-layout';
+ import { Input, Button } from 'antd';
```diff
- import { PageHeader, Comment, Input, Button } from 'antd';
+ import { Comment } from '@ant-design/compatible';
+ import { PageHeader } from '@ant-design/pro-layout';
+ import { Input, Button } from 'antd';
const App: React.FC = () => (
<div>
<PageHeader />
<Comment />
</div>
);
const App: React.FC = () => (
<>
<PageHeader />
<Comment />
</>
);
export default App;
```
export default App;
```
- BackTop is deprecated in `5.0.0`, and is merged into FloatButton.
```diff
- import { BackTop } from 'antd';
+ import { FloatButton } from 'antd';
```diff
- import { BackTop } from 'antd';
+ import { FloatButton } from 'antd';
const App: React.FC = () => (
<div>
- <BackTop />
+ <FloatButton.BackTop />
</div>
);
const App: React.FC = () => (
<div>
- <BackTop />
+ <FloatButton.BackTop />
</div>
);
export default App;
```
export default App;
```
## Start upgrading
@ -171,7 +169,6 @@ If you using antd less variables, you can use compatible package to covert it in
import { theme } from 'antd';
import { convertLegacyToken } from '@ant-design/compatible';
const { defaultAlgorithm, defaultSeed } = theme;
const mapToken = defaultAlgorithm(defaultSeed);
@ -190,4 +187,4 @@ const v4Token = convertLegacyToken(mapToken);
## Encounter problems
If you encounter problems during the upgrade, please go to [GitHub issues](http://new-issue.ant.design/) for feedback. We will respond and improve this document as soon as possible.
If you encounter problems during the upgrade, please go to [GitHub issues](https://new-issue.ant.design/) for feedback. We will respond and improve this document as soon as possible.

167
docs/react/migration-v5.zh-CN.md
View File

@ -29,14 +29,14 @@ title: 从 v4 到 v5
- 内置的时间库使用 Dayjs 替代 Moment.js，具体请查看 [使用自定义日期库](/docs/react/use-custom-date-library-cn/)。
- 不再支持 `babel-plugin-import`，CSS-in-JS 本身具有按需加载的能力，不再需要插件支持。Umi 用户可以移除相关配置。
```diff
// config/config.ts
export default {
antd: {
- import: true,
},
};
```
```diff
// config/config.ts
export default {
antd: {
- import: true,
},
};
```
### 兼容性调整
@ -45,6 +45,7 @@ export default {
#### 组件 API 调整
- 组件弹框的 classname API 统一为 `popupClassName`，`dropdownClassName` 等类似 API 都会被替换。
- AutoComplete 组件
- Cascader 组件
- Select 组件
@ -53,20 +54,21 @@ export default {
- DatePicker 组件
- Mentions 组件
```diff
import { Select } from 'antd';
```diff
import { Select } from 'antd';
const App: React.FC = () => (
<Select
- dropdownClassName="my-select-popup"
+ popupClassName="my-select-popup"
/>
);
const App: React.FC = () => (
<Select
- dropdownClassName="my-select-popup"
+ popupClassName="my-select-popup"
/>
);
export default App;
```
export default App;
```
- 组件弹框的受控可见 API 统一为 `open`，`visible` 等类似 API 都会被替换。
- Drawer 组件 `visible` 变为 `open`。
- Modal 组件 `visible` 变为 `open`。
- Dropdown 组件 `visible` 变为 `open`。
@ -75,88 +77,84 @@ export default {
- Slider 组件 `tooltip` 相关 API 收敛到 `tooltip` 属性中。
- Table 组件 `filterDropdownVisible` 变为 `filterDropdownOpen`。
```diff
import { Modal, Tag, Table, Slider } from 'antd';
const App: React.FC = () => {
const [visible, setVisible] = useState(true);
return (
<>
- <Modal visible={visible}>content</Modal>
+ <Modal open={visible}>content</Modal>
- <Tag visible={visible}>tag</Tag>
+ {visible && <Tag>tag</Tag>}
<Table
data={[]}
columns={[
{
title: 'Name',
dataIndex: 'name',
- filterDropdownVisible: visible,
+ filterDropdownOpen: visible,
}
]}
/>
- <Slider tooltipVisible={visible} />
+ <Slider tooltip={{ open: visible }} />
</>
);
}
export default App;
```
```diff
import { Modal, Tag, Table, Slider } from 'antd';
const App: React.FC = () => {
const [visible, setVisible] = useState(true);
return (
<>
- <Modal visible={visible}>content</Modal>
+ <Modal open={visible}>content</Modal>
- <Tag visible={visible}>tag</Tag>
+ {visible && <Tag>tag</Tag>}
<Table
data={[]}
columns={[
{
title: 'Name',
dataIndex: 'name',
- filterDropdownVisible: visible,
+ filterDropdownOpen: visible,
}
]}
/>
- <Slider tooltipVisible={visible} />
+ <Slider tooltip={{ open: visible }} />
</>
);
}
export default App;
```
- `getPopupContainer`: 所有的 `getPopupContainer` 都需要保证返回的是唯一的 div。React 18 concurrent 下会反复调用该方法。
- Dropdown
- 魔改包裹元素样式移除，请使用 Space 组件。
- Dropdown.Button 的 `prefixCls` 改为 `dropdown`。
- Upload List 结构变化。
- Upload List dom 结构变化。[#34528](https://github.com/ant-design/ant-design/pull/34528)
- Notification
- 静态方法不在允许在 `open` 中动态设置 `prefixCls` `maxCount` `top` `bottom` `getContainer`，Notification 静态方法现在将只有一个实例。如果需要不同配置，请使用 `useNotification`。
- `close` 改名为 `destroy` 和 message 保持一致。
- Drawer
- `style` & `className` 迁移至 Drawer Panel 中，原属性替换为 `rootClassName` 和 `rootStyle`。
- `close` 改名为 `destroy`，和 message 保持一致。
- Drawer `style` 和 `className` 迁移至 Drawer 弹层区域上，原属性替换为 `rootClassName` 和 `rootStyle`。
#### 组件重构与移除
- 移除 Comment 组件，移至 `@ant-design/compatible` 中维护。
- 移除 PageHeader 组件，移至 `@ant-design/pro-components` 中维护。
```diff
- import { PageHeader, Comment, Input, Button } from 'antd';
+ import { Comment } from '@ant-design/compatible';
+ import { PageHeader } from '@ant-design/pro-layout';
+ import { Input, Button } from 'antd';
```diff
- import { PageHeader, Comment, Input, Button } from 'antd';
+ import { Comment } from '@ant-design/compatible';
+ import { PageHeader } from '@ant-design/pro-layout';
+ import { Input, Button } from 'antd';
const App: React.FC = () => (
<div>
<PageHeader />
<Comment />
</div>
);
const App: React.FC = () => (
<>
<PageHeader />
<Comment />
</>
);
export default App;
```
export default App;
```
- BackTop 组件在 `5.0.0` 中废弃，移至 FloatButton 悬浮按钮中。如需使用，可以从 FloatButton 中引入。
```diff
- import { BackTop } from 'antd';
+ import { FloatButton } from 'antd';
```diff
- import { BackTop } from 'antd';
+ import { FloatButton } from 'antd';
const App: React.FC = () => (
<div>
- <BackTop />
+ <FloatButton.BackTop />
</div>
);
const App: React.FC = () => (
<>
- <BackTop />
+ <FloatButton.BackTop />
</>
);
export default App;
```
export default App;
```
## 开始升级
@ -172,7 +170,6 @@ npm install --save antd@5.x
import { theme } from 'antd';
import { convertLegacyToken } from '@ant-design/compatible';
const { defaultAlgorithm, defaultSeed } = theme;
const mapToken = defaultAlgorithm(defaultSeed);
@ -191,4 +188,4 @@ const v4Token = convertLegacyToken(mapToken);
## 遇到问题
如果您在升级过程中遇到了问题，请到 [GitHub issues](http://new-issue.ant.design/) 进行反馈。我们会尽快响应和相应改进这篇文档。
如果您在升级过程中遇到了问题，请到 [GitHub issues](https://new-issue.ant.design/) 进行反馈。我们会尽快响应和相应改进这篇文档。

Write Preview
Loading…
Cancel
Save