mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-10 07:59:49 +08:00
cef58664e8
* ✨feat: add token * 📝doc: update lint * 📝doc: update doc
3.3 KiB
3.3 KiB
category | subtitle | group | title | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | 包裹组件 | 其他 | App | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original |
|
新的包裹组件,提供重置样式和提供消费上下文的默认环境。
何时使用
- 提供可消费 React context 的
message.xxx
、Modal.xxx
、notification.xxx
的静态方法,可以简化 useMessage 等方法需要手动植入contextHolder
的问题。 - 提供基于
.ant-app
的默认重置样式,解决原生元素没有 antd 规范样式的问题。
代码演示
基本用法
如何使用
基础用法
App 组件通过 Context
提供上下文方法调用,因而 useApp 需要作为子组件才能使用,我们推荐在应用中顶层包裹 App。
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 <div>Hello word</div>;
};
const MyApp: React.FC = () => (
<App>
<MyPage />
</App>
);
export default MyApp;
注意:App.useApp 必须在 App 之下方可使用。
与 ConfigProvider 先后顺序
App 组件只能在 ConfigProvider
之下才能使用 Design Token, 如果需要使用其样式重置能力,则 ConfigProvider 与 App 组件必须成对出现。
<ConfigProvider theme={{ ... }}>
<App>
...
</App>
</ConfigProvider>
内嵌使用场景(如无必要,尽量不做嵌套)
<App>
<Space>
...
<App>...</App>
</Space>
</App>
全局场景(redux 场景)
// 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<ModalStaticFunctions, 'warn'>;
export default () => {
const staticFunction = App.useApp();
message = staticFunction.message;
modal = staticFunction.modal;
notification = staticFunction.notification;
return null;
};
export { message, notification, modal };
// sub page
import { Button, Space } from 'antd';
import React from 'react';
import { message } from './store';
export default () => {
const showMessage = () => {
message.success('Success!');
};
return (
<Space>
<Button type="primary" onClick={showMessage}>
Open message
</Button>
</Space>
);
};
API
App
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
message | App 内 Message 的全局配置 | MessageConfig | - | 5.3.0 |
notification | App 内 Notification 的全局配置 | NotificationConfig | - | 5.3.0 |