React——Ant Design组件库Message全局提示的使用

朝朝忆萍

已于 2023-02-25 09:39:01 修改

阅读量5.9k

点赞数 2

分类专栏： React单页面应用文章标签： react.js javascript 前端

于 2023-02-24 19:27:01 首次发布

本文链接：https://blog.csdn.net/jddfj/article/details/129176794

版权

React单页面应用专栏收录该内容

7 篇文章 3 订阅

订阅专栏

1.通过useMessage自定义Hook使用

官网推荐使用Hook调用的方法

import { Button, message } from 'antd';

const App = () => {
//在函数组件内注册
  const [messageApi, contextHolder] = message.useMessage();
  const info = () => {
    //调用open使用
    messageApi
        .open({
            type: 'success',
            content: '成功',
            duration: 1
        })
     };
  return (
      //这一处必须要有
      {contextHolder}
      <Button type="primary" onClick={info}>
        Display normal message
      </Button>
  );
};
export default App;

这种方法只能在本页显示，如果显示后跳转页面就不会显示。因为{contextHolder}是写在本页面的。如果需要跳转页面可以用promise调用

messageApi
    .open({
        type: 'success',
        content: '成功',
        duration: 1
    })
    .then(()=>{
        navigate('/',{replace: true})
    })

2.静态调用

传递的参数依次为，提示信息、显示时间、关闭后触发的回调

message.success('成功', 0, onClose)
message.error('错误', 0, onClose)
message.info('普通', 0, onClose)
message.warning('警告', 0, onClose)
message.loading('等待', 0, onClose)