Notification 通知 #

概述 #

Notification 通知组件用于在页面角落显示通知消息，支持多种类型和自定义配置。

基础用法 #

基本通知 #

tsx

import { notification, Button, Space } from 'antd';

const [api, contextHolder] = notification.useNotification();

const openNotification = () => {
  api.open({
    message: '通知标题',
    description: '这是通知内容，这是一段很长的描述文字。',
  });
};

<Space>
  {contextHolder}
  <Button type="primary" onClick={openNotification}>
    打开通知
  </Button>
</Space>

通知类型 #

tsx

import { notification, Button, Space } from 'antd';

const [api, contextHolder] = notification.useNotification();

<Space>
  {contextHolder}
  <Button onClick={() => api.success({ message: '成功', description: '操作成功' })}>
    成功
  </Button>
  <Button onClick={() => api.error({ message: '错误', description: '操作失败' })}>
    错误
  </Button>
  <Button onClick={() => api.info({ message: '信息', description: '提示信息' })}>
    信息
  </Button>
  <Button onClick={() => api.warning({ message: '警告', description: '警告信息' })}>
    警告
  </Button>
</Space>

位置 #

tsx

import { notification, Button, Space } from 'antd';

const [api, contextHolder] = notification.useNotification();

<Space>
  {contextHolder}
  <Button onClick={() => api.open({ message: '通知', description: '内容', placement: 'topLeft' })}>
    左上
  </Button>
  <Button onClick={() => api.open({ message: '通知', description: '内容', placement: 'topRight' })}>
    右上
  </Button>
  <Button onClick={() => api.open({ message: '通知', description: '内容', placement: 'bottomLeft' })}>
    左下
  </Button>
  <Button onClick={() => api.open({ message: '通知', description: '内容', placement: 'bottomRight' })}>
    右下
  </Button>
</Space>

自动关闭 #

tsx

import { notification, Button } from 'antd';

const [api, contextHolder] = notification.useNotification();

<Button onClick={() => api.open({
  message: '通知',
  description: '5秒后自动关闭',
  duration: 5,
})}>
  5秒后关闭
</Button>

不自动关闭 #

tsx

import { notification, Button } from 'antd';

const [api, contextHolder] = notification.useNotification();

<Button onClick={() => api.open({
  message: '通知',
  description: '不会自动关闭',
  duration: 0,
})}>
  不自动关闭
</Button>

自定义按钮 #

tsx

import { notification, Button } from 'antd';

const [api, contextHolder] = notification.useNotification();

const btn = (
  <Button type="primary" size="small" onClick={() => api.destroy()}>
    确定
  </Button>
);

<Button onClick={() => api.open({
  message: '通知',
  description: '自定义按钮',
  btn,
})}>
  自定义按钮
</Button>

自定义样式 #

tsx

import { notification, Button } from 'antd';

const [api, contextHolder] = notification.useNotification();

<Button onClick={() => api.open({
  message: '通知',
  description: '自定义样式',
  style: {
    width: 600,
    marginLeft: -250,
  },
  className: 'custom-notification',
})}>
  自定义样式
</Button>

更新通知 #

tsx

import { notification, Button } from 'antd';

const [api, contextHolder] = notification.useNotification();

const openNotification = () => {
  const key = `open${Date.now()}`;
  const btn = (
    <Button type="primary" size="small" onClick={() => api.destroy(key)}>
      确定
    </Button>
  );
  api.open({
    message: '通知标题',
    description: '通知内容',
    btn,
    key,
  });
  setTimeout(() => {
    api.open({
      message: '已更新',
      description: '通知内容已更新',
      btn,
      key,
    });
  }, 1000);
};

全局方法 #

tsx

import { notification } from 'antd';

notification.open({
  message: '通知标题',
  description: '通知内容',
});

notification.success({ message: '成功', description: '操作成功' });
notification.error({ message: '错误', description: '操作失败' });
notification.info({ message: '信息', description: '提示信息' });
notification.warning({ message: '警告', description: '警告信息' });

API #

notification.useNotification() #

返回 [api, contextHolder]，推荐使用此方式。

静态方法 #

方法	说明
notification.open	打开通知
notification.success	成功通知
notification.error	错误通知
notification.info	信息通知
notification.warning	警告通知
notification.close	关闭通知
notification.destroy	销毁通知

参数说明 #

属性	说明	类型	默认值
bottom	距离底部	number	24
btn	自定义按钮	ReactNode	-
className	自定义类名	string	-
closeIcon	自定义关闭图标	ReactNode	-
description	描述	ReactNode	-
duration	持续时间(秒)	number	4.5
icon	自定义图标	ReactNode	-
key	唯一标识	string	-
message	标题	ReactNode	-
placement	位置	`top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	`topRight`
style	自定义样式	CSSProperties	-
top	距离顶部	number	24
onClose	关闭回调	function	-
onClick	点击回调	function	-

全局配置 #

属性	说明	类型	默认值
bottom	距离底部	number	24
closeIcon	自定义关闭图标	ReactNode	-
duration	持续时间	number	4.5
getContainer	配置渲染节点	() => HTMLElement	() => document.body
maxCount	最大显示数	number	-
placement	位置	string	`topRight`
prefixCls	前缀类名	string	`ant-notification`
rtl	是否 RTL	boolean	false
top	距离顶部	number	24

最佳实践 #

1. 使用 hooks 方式 #

tsx

import { notification } from 'antd';

const App = () => {
  const [api, contextHolder] = notification.useNotification();

  const showNotification = () => {
    api.success({
      message: '操作成功',
      description: '数据已保存',
    });
  };

  return (
    <>
      {contextHolder}
      <Button onClick={showNotification}>显示通知</Button>
    </>
  );
};

2. 异步操作通知 #

tsx

import { notification } from 'antd';

const handleSubmit = async () => {
  const key = 'submit';
  notification.open({
    key,
    message: '提交中',
    description: '正在提交数据...',
    duration: 0,
  });
  try {
    await submitData();
    notification.success({
      key,
      message: '提交成功',
      description: '数据已保存',
    });
  } catch (error) {
    notification.error({
      key,
      message: '提交失败',
      description: error.message,
    });
  }
};

3. 带操作的通知 #

tsx

import { notification, Button } from 'antd';

const showUndoNotification = () => {
  const key = `undo-${Date.now()}`;
  notification.open({
    key,
    message: '已删除',
    description: '点击撤销可恢复',
    btn: (
      <Button type="primary" size="small" onClick={() => {
        undoDelete();
        notification.destroy(key);
      }}>
        撤销
      </Button>
    ),
    duration: 5,
  });
};

下一步 #

接下来学习主题定制组件！