+
+ -
+ +
+ >
+ );
+ }
+
+ 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 = () => (
-
-
-
-
- );
+ const App: React.FC = () => (
+ <>
+
+
+ >
+ );
- 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 = () => (
-
--
-+
-
- );
+ const App: React.FC = () => (
+
+ -
+ +
+
+ );
- 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.
diff --git a/docs/react/migration-v5.zh-CN.md b/docs/react/migration-v5.zh-CN.md
index 4ba8e98041..562d27c48c 100644
--- a/docs/react/migration-v5.zh-CN.md
+++ b/docs/react/migration-v5.zh-CN.md
@@ -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 = () => (
-
- );
+ const App: React.FC = () => (
+
+ );
- 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 (
- <>
-- content
-+ content
-
-- tag
-+ {visible && tag}
-
-