diff --git a/docs/react/migration-v5.en-US.md b/docs/react/migration-v5.en-US.md index a7e7f04a50..9d0afa2802 100644 --- a/docs/react/migration-v5.en-US.md +++ b/docs/react/migration-v5.en-US.md @@ -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 = () => ( - + ); - 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 ( - <> -- content -+ content - -- tag -+ {visible && tag} - - - -- -+ - - ); - } - - export default App; -``` + ```diff + import { Modal, Tag, Table, Slider } from 'antd'; + + const App: React.FC = () => { + const [visible, setVisible] = useState(true); + + return ( + <> + - content + + content + + - tag + + {visible && tag} + +
+ + - + + + + ); + } + + 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 = () => ( - + ); - 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} - -
- -- -+ - - ); - } - - export default App; -``` + ```diff + import { Modal, Tag, Table, Slider } from 'antd'; + + const App: React.FC = () => { + const [visible, setVisible] = useState(true); + + return ( + <> + - content + + content + + - tag + + {visible && tag} + +
+ + - + + + + ); + } + + 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 = () => ( -
- - -
- ); + const App: React.FC = () => ( + <> + + + + ); - 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 = () => ( -
-- -+ -
- ); + const App: React.FC = () => ( + <> + - + + + + ); - 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/) 进行反馈。我们会尽快响应和相应改进这篇文档。