ant-design/components/notification/demo/hooks.md

70 lines
2.2 KiB
Markdown
Raw Normal View History

---
order: -1
title:
zh-CN: Hooks 调用(推荐)
en-US: Hooks usage (recommended)
---
## zh-CN
通过 `notification.useNotification` 创建支持读取 context 的 `contextHolder`。请注意,我们推荐通过顶层注册的方式代替 `message` 静态方法,因为静态方法无法消费上下文,因而 ConfigProvider 的数据也不会生效。
## en-US
Use `notification.useNotification` to get `contextHolder` with context accessible issue. Please note that, we recommend to use top level registration instead of `notification` static method, because static method cannot consume context, and ConfigProvider data will not work.
```tsx
import {
RadiusBottomleftOutlined,
RadiusBottomrightOutlined,
2022-05-21 22:14:15 +08:00
RadiusUpleftOutlined,
RadiusUprightOutlined,
} from '@ant-design/icons';
2022-05-21 22:14:15 +08:00
import { Button, Divider, notification, Space } from 'antd';
2022-07-05 22:38:57 +08:00
import type { NotificationPlacement } from 'antd/es/notification/interface';
2022-05-21 22:14:15 +08:00
import React from 'react';
const Context = React.createContext({ name: 'Default' });
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = (placement: NotificationPlacement) => {
api.info({
message: `Notification ${placement}`,
description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
placement,
});
};
return (
<Context.Provider value={{ name: 'Ant Design' }}>
{contextHolder}
<Space>
<Button type="primary" onClick={() => openNotification('topLeft')}>
<RadiusUpleftOutlined />
topLeft
</Button>
<Button type="primary" onClick={() => openNotification('topRight')}>
<RadiusUprightOutlined />
topRight
</Button>
</Space>
<Divider />
<Space>
<Button type="primary" onClick={() => openNotification('bottomLeft')}>
<RadiusBottomleftOutlined />
bottomLeft
</Button>
<Button type="primary" onClick={() => openNotification('bottomRight')}>
<RadiusBottomrightOutlined />
bottomRight
</Button>
</Space>
</Context.Provider>
);
};
export default App;
```