（记录笔记4）——4.4 Message全局提示

4.4 Message全局提示

全局展示操作反馈信息。

一.Message组件

1.Message组件

• 引入Message:import { message } from ‘antd’;

import { message, Button } from 'antd';

const info = () => {
  message.info('This is a normal message');
};

ReactDOM.render(
  <Button type="primary" onClick={info}>Display normal message</Button>,
  mountNode);

二.实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kCCK2wow-1640781484989)(http://ww1.sinaimg.cn/large/006pJUwqly1fxmf9bdizuj30n109caaj.jpg)]

//src\pages\ui\messages.js
import React from "react";
import "./ui.less";
import { Card, Button, message, Spin, Icon, Alert } from "antd";

export default class Message extends React.Component {
  showMeassage = type => {
    message[type]("恭喜你，React课程晋级成功.");
  };
  render() {
    return (
      <div>
        <Card title="全局提示框" className="card-wrap">
          <Button type="primary" onClick={() => this.showMeassage("success")}>
            Success
          </Button>
          <Button type="primary" onClick={() => this.showMeassage("info")}>
            Info
          </Button>
          <Button type="primary" onClick={() => this.showMeassage("warning")}>
            Warning
          </Button>
          <Button type="primary" onClick={() => this.showMeassage("error")}>
            Error
          </Button>
          <Button type="primary" onClick={() => this.showMeassage("loading")}>
            Loading
          </Button>
        </Card>
      </div>
    );
  }
}

API#

组件提供了一些静态方法，使用方式和参数如下：

message.success(content)

---

• message.success(content, [duration], onClose)

• message.error(content, [duration], onClose)

• message.info(content, [duration], onClose)

• message.warning(content, [duration], onClose)

• message.loading(content, [duration], onClose)

  参数	说明	类型	默认值
  content	提示内容	string|ReactNode	-
  duration	自动关闭的延时，单位秒。设为 0 时不自动关闭。	number	3
  onClose	关闭时触发的回调函数	Function	-