mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
41fe4ced89
Typo fix for App documentation
3.1 KiB
3.1 KiB
category | group | title | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|
Components | Other | App | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original |
|
Application wrapper for some global usages.
When To Use
- Provide reset styles based on
.ant-app
element. - You could use static methods of
message/notification/Modal
formuseApp
without writingcontextHolder
manually.
Examples
basic
How to use
Basic usage
App provides upstream and downstream method calls through Context
, because useApp needs to be used as a subcomponent, we recommend encapsulating App at the top level in the application.
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;
Note: App.useApp must be available under App.
Sequence with ConfigProvider
The App component can only use the token in the ConfigProvider
, if you need to use the Token, the ConfigProvider and the App component must appear in pairs.
<ConfigProvider theme={{ ... }}>
<App>
...
</App>
</ConfigProvider>
Embedded usage scenarios (if not necessary, try not to do nesting)
<App>
<Space>
...
<App>...</App>
</Space>
</App>
Global scene (redux scene)
// 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
Property | Description | Type | Default | Version |
---|---|---|---|---|
message | Global config for Message | MessageConfig | - | 5.3.0 |
notification | Global config for Notification | NotificationConfig | - | 5.3.0 |