mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 23:59:12 +08:00
122 lines
2.9 KiB
Markdown
122 lines
2.9 KiB
Markdown
---
|
||
category: Components
|
||
subtitle: 包裹组件
|
||
group: 其他
|
||
title: App
|
||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original
|
||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
|
||
demo:
|
||
cols: 2
|
||
---
|
||
|
||
新的包裹组件，提供重置样式和提供消费上下文的默认环境。
|
||
|
||
## 何时使用
|
||
|
||
- 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。
|
||
- 提供基于 `.ant-app` 的默认重置样式，解决原生元素没有 antd 规范样式的问题。
|
||
|
||
## 代码演示
|
||
|
||
<!-- prettier-ignore -->
|
||
<code src="./demo/basic.tsx">基本用法</code>
|
||
|
||
## 如何使用
|
||
|
||
### 基础用法
|
||
|
||
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 <div>Hello word</div>;
|
||
};
|
||
|
||
const MyApp: React.FC = () => (
|
||
<App>
|
||
<MyPage />
|
||
</App>
|
||
);
|
||
|
||
export default MyApp;
|
||
```
|
||
|
||
注意：App.useApp 必须在 App 之下方可使用。
|
||
|
||
### 与 ConfigProvider 先后顺序
|
||
|
||
App 组件只能在 `ConfigProvider` 之下才能使用 Design Token， 如果需要使用其样式重置能力，则 ConfigProvider 与 App 组件必须成对出现。
|
||
|
||
```tsx
|
||
<ConfigProvider theme={{ ... }}>
|
||
<App>
|
||
...
|
||
</App>
|
||
</ConfigProvider>
|
||
```
|
||
|
||
### 内嵌使用场景（如无必要，尽量不做嵌套）
|
||
|
||
```tsx
|
||
<App>
|
||
<Space>
|
||
...
|
||
<App>...</App>
|
||
</Space>
|
||
</App>
|
||
```
|
||
|
||
### 全局场景（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<ModalStaticFunctions, 'warn'>;
|
||
|
||
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 (
|
||
<Space>
|
||
<Button type="primary" onClick={showMessage}>
|
||
Open message
|
||
</Button>
|
||
</Space>
|
||
);
|
||
};
|
||
```
|