ReactJS UI Ant 设计消息组件

Ant Design Library 已经预先构建了这个组件，并且它也很容易集成。响应用户操作，消息组件用于将全局消息显示为反馈。我们可以在 ReactJS 中使用以下方法来使用 Ant Design 消息组件。

留言道具：

content：用于表示消息的内容。
duration：用于表示自动关闭前的时间，以秒为单位，如果设置为 0，则不关闭。
onClose：是消息关闭时触发的回调函数。

消息配置道具：

className：用于自定义的 CSS 类。
content：用于表示消息的内容。
duration：用于表示自动关闭前的时间，以秒为单位，如果设置为 0，则不关闭。
图标：用于自定义图标。
key：用于Message的唯一标识。
style：用于自定义的内联样式。
onClick：是点击消息时触发的回调函数。
onClose：是消息关闭时触发的回调函数。

消息配置默认道具：

持续时间：用于表示自动关闭前的时间，以秒为单位。
getContainer：用于返回Message的挂载节点。
maxCount：用于表示最大消息显示。
prefixCls：用于消息节点的前缀className。
rtl：用于指示是否开启 RTL 模式。
top：用于表示到顶部的距离。

全局静态方法：

message.config(options)：该方法用于消息的全局配置。它将 options 对象作为参数，其 props 已在上面进行了说明（请参阅 Message Config Default Props）。
message.destroy()：此方法用于删除消息。此方法不带任何参数。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install antd
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
import "antd/dist/antd.css";
import { Button, message } from 'antd';
  
export default function App() {
  
  return (
    
      ReactJS Ant-Design Message Component
      <>
        
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://ant.design/components/message/