Message 全局提示 #

概述 #

Message 全局提示用于在页面顶部显示操作反馈信息，支持多种类型和自定义配置。

基础用法 #

基本使用 #

tsx

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

const [messageApi, contextHolder] = message.useMessage();

const info = () => {
  messageApi.info('这是一条普通提示');
};

<Space>
  {contextHolder}
  <Button type="primary" onClick={info}>
    显示提示
  </Button>
</Space>

提示类型 #

tsx

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

const [messageApi, contextHolder] = message.useMessage();

<Space>
  {contextHolder}
  <Button onClick={() => messageApi.success('成功提示')}>成功</Button>
  <Button onClick={() => messageApi.error('错误提示')}>错误</Button>
  <Button onClick={() => messageApi.warning('警告提示')}>警告</Button>
  <Button onClick={() => messageApi.info('信息提示')}>信息</Button>
  <Button onClick={() => messageApi.loading('加载中...')}>加载</Button>
</Space>

加载提示 #

tsx

import { message, Button } from 'antd';

const [messageApi, contextHolder] = message.useMessage();

const hideLoading = () => {
  const hide = messageApi.loading('正在加载...', 0);
  setTimeout(hide, 2500);
};

<Space>
  {contextHolder}
  <Button onClick={hideLoading}>显示加载</Button>
</Space>

修改延时 #

tsx

import { message, Button } from 'antd';

const [messageApi, contextHolder] = message.useMessage();

<Button onClick={() => messageApi.success('成功提示', 5)}>
  显示 5 秒
</Button>

带回调 #

tsx

import { message, Button } from 'antd';

const [messageApi, contextHolder] = message.useMessage();

<Button onClick={() => {
  messageApi.success('操作成功', 2.5, () => {
    console.log('提示关闭');
  });
}}>
  带回调
</Button>

可关闭 #

tsx

import { message, Button } from 'antd';

const [messageApi, contextHolder] = message.useMessage();

messageApi.config({
  top: 100,
  duration: 2,
  maxCount: 3,
});

<Button onClick={() => messageApi.success({
  content: '可关闭提示',
  closable: true,
})}>
  可关闭
</Button>

全局方法 #

tsx

import { message } from 'antd';

message.success('成功提示');
message.error('错误提示');
message.info('信息提示');
message.warning('警告提示');
message.loading('加载提示');

全局配置 #

tsx

import { message } from 'antd';

message.config({
  top: 100,
  duration: 2,
  maxCount: 3,
  rtl: true,
  prefixCls: 'my-message',
});

API #

静态方法 #

方法	说明	参数
message.success	成功提示	content, duration, onClose
message.error	错误提示	content, duration, onClose
message.info	信息提示	content, duration, onClose
message.warning	警告提示	content, duration, onClose
message.warn	警告提示	content, duration, onClose
message.loading	加载提示	content, duration, onClose

参数说明 #

参数	说明	类型	默认值
content	提示内容	ReactNode \| ArgsProps	-
duration	持续时间(秒)	number	3
onClose	关闭回调	function	-

ArgsProps #

参数	说明	类型	默认值
className	自定义类名	string	-
content	提示内容	ReactNode	-
duration	持续时间	number	3
icon	自定义图标	ReactNode	-
key	唯一标识	string \| number	-
onClose	关闭回调	function	-
style	自定义样式	CSSProperties	-
type	类型	`success` \| `info` \| `warning` \| `error` \| `loading`	-

全局配置 #

参数	说明	类型	默认值
duration	默认持续时间	number	3
getContainer	配置渲染节点	() => HTMLElement	() => document.body
maxCount	最大显示数	number	-
prefixCls	前缀类名	string	`ant-message`
rtl	是否 RTL	boolean	false
top	距离顶部	number	8

最佳实践 #

1. 使用 hooks 方式 #

tsx

import { message } from 'antd';

const App = () => {
  const [messageApi, contextHolder] = message.useMessage();

  const handleClick = () => {
    messageApi.success('操作成功');
  };

  return (
    <>
      {contextHolder}
      <Button onClick={handleClick}>点击</Button>
    </>
  );
};

2. 异步操作提示 #

tsx

import { message } from 'antd';

const handleSubmit = async () => {
  const hide = message.loading('提交中...', 0);
  try {
    await submitData();
    hide();
    message.success('提交成功');
  } catch (error) {
    hide();
    message.error('提交失败');
  }
};

3. 更新提示内容 #

tsx

import { message } from 'antd';

const key = 'updatable';

const showMessage = () => {
  message.open({
    key,
    type: 'loading',
    content: '加载中...',
  });
  setTimeout(() => {
    message.open({
      key,
      type: 'success',
      content: '加载成功',
      duration: 2,
    });
  }, 1000);
};

下一步 #

接下来学习 Modal 对话框组件！