--- category: Components subtitle: 包裹组件 group: 其他 title: App cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- 新的包裹组件,提供重置样式和提供消费上下文的默认环境。 ## 何时使用 - 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法,可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。 - 提供基于 `.ant-app` 的默认重置样式,解决原生元素没有 antd 规范样式的问题。 ## 代码演示 基本用法 ## 如何使用 ### 基础用法 App 组件通过 `Context` 提供上下文方法调用,因而 useApp 需要作为子组件才能使用,我们推荐在应用中顶层包裹 App。 ```tsx import { App } from 'antd'; import React from 'react'; const MyPage: React.FC = () => { const { message, notification, modal } = App.useApp(); message.success('Good!'); notification.info({ message: 'Good' }); modal.warning({ title: 'Good' }); // .... // other message, notification, modal static function return
Hello word
; }; const MyApp: React.FC = () => ( ); export default MyApp; ``` 注意:App.useApp 必须在 App 之下方可使用。 ### 与 ConfigProvider 先后顺序 App 组件只能在 `ConfigProvider` 之下才能使用 Design Token, 如果需要使用其样式重置能力,则 ConfigProvider 与 App 组件必须成对出现。 ```tsx ... ``` ### 内嵌使用场景(如无必要,尽量不做嵌套) ```tsx ... ... ``` ### 全局场景(redux 场景) ```tsx // Entry component import { App } from 'antd'; import type { MessageInstance } from 'antd/es/message/interface'; import type { ModalStaticFunctions } from 'antd/es/modal/confirm'; import type { NotificationInstance } from 'antd/es/notification/interface'; let message: MessageInstance; let notification: NotificationInstance; let modal: Omit; export default () => { const staticFunction = App.useApp(); message = staticFunction.message; modal = staticFunction.modal; notification = staticFunction.notification; return null; }; export { message, notification, modal }; ``` ```tsx // sub page import { Button, Space } from 'antd'; import React from 'react'; import { message } from './store'; export default () => { const showMessage = () => { message.success('Success!'); }; return ( ); }; ```