React项目中封装一个消息提示组件

最新推荐文章于 2025-08-24 19:31:30 发布

孙俊熙

最新推荐文章于 2025-08-24 19:31:30 发布

阅读量144

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端 react TypeScript 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/huihui_999/article/details/147249182

前端同时被 3 个专栏收录

161 篇文章

订阅专栏

react

43 篇文章

订阅专栏

TypeScript

13 篇文章

订阅专栏

代码如下:

import { message } from 'antd';
import { CloseOutlined } from '@ant-design/icons'

// type: open,success,error,info,warning,loading
// text: 提示文案
// key 用于关闭提示
// time 延迟关闭时间
export const setMessage = (type: string, text: any, time?: number) => {
  let timeoutName: any;
  if (time) {
    let timeRemaining: any = time - 1;
    const countDown: any = () => {
      message[type]({
        content: <span className="message-box">
          {text}<span className="time-text">({timeRemaining})s</span>
          <CloseOutlined className="close-icon" onClick={destroyMessage} />
        </span>,
        key,
        duration: 0,
      });
      timeoutName = setTimeout(() => {
        timeRemaining = timeRemaining - 1;
        message[type]({
          content: <span className="message-box">
            {text}<span className="time-text">({timeRemaining})s</span>
            <CloseOutlined className="close-icon" onClick={destroyMessage} />
          </span>,
          key,
          duration: 0,
        });
        if (timeRemaining <= 0) {
          message.destory(key);
        }
        if (timeRemaining > 0) {
          countDown();
        }
      }, 1000);
    };
    countDown();
    const destroyMessage = () => {
      timeRemaining = 1;
      message.destory(key);
      clearTimeout(timeoutName);
    };

  } else {
    const countDown: any = () => {
      message[type]({
        content: <span className="message-box">
          {text}<span className="time-text">({timeRemaining})s</span>
          <CloseOutlined className="close-icon" onClick={destroyMessage} />
        </span>,
        key,
        duration: 0,
      });
    };
    countDown();
    const destroyMessage = () => {
      message.destory(key);
      clearTimeout(timeoutName);
    };

  }
}

// 使用时
// setMessage('error', res.data.msg || '处理失败', Math.random(), 3)
// setMessage('success', '处理成功', Math.random(), 3)