介绍
react-mobx-notification-system 是一款基于 React 和 Mobx 开发的前端通知组件。该组件是构建现代化 Web 应用程序非常实用的工具，因为它可以让您在 Web 应用程序中显示用户友好的通知消息，例如成功操作、错误提示、警告等等。
该组件提供了一系列的 API 使得开发人员可以非常方便的定制通知的外观、位置、过渡动画等等，以满足不同应用场景的需求。
本文完整介绍了 react-mobx-notification-system 的使用方法，您将会学到如何在您的 React 应用程序中集成该组件及其 API 的详细用法。
安装
要使用 react-mobx-notification-system，您需要通过 npm 安装该依赖。
npm install react-mobx-notification-system --save
组件同时依赖于 React 和 Mobx ，所以您需要确保这两个库也已安装。如果您还没有安装这些库，使用以下命令安装：
npm install react mobx mobx-react --save
使用方法
在您的 React 组件中，导入 NotificationSystem 类并在 constructor 函数中进行初始化。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- -------- - ---- -------------
------ - ------------------ - ---- ---------------------------------
----------------------------
---------
----- ------------- ------- --------- -
------------------ -
-------------
----------------------- - --- --------------------
------------- - -- ----
------- -------
-------- -------
------------- ------
----------- -------
--------- -------
---------------- ----------
------ ----------
---------- ---- --- --- ---------
---------- ---------
------- ------
--
--------- ----------- -- ----
------- -------------- -- ----
------------------ ---- -- ------
------------ ---- -- --------
---
-
-- ---- ----- --------------
-- --------------------
------------------- -
---------------------------------------- -- --- ------------ ----------
-
-------- -
------ -
-----
--- ---- ---
------
--
-
-
------ ------- --------------在 React 组件中，您可以使用 NotificationSystem 实例上提供的方法来构建不同类型的通知。
// 成功消息
this.notificationSystem.success('You just made a successful operation.');
// 错误消息
this.notificationSystem.error('Oops, unexpected error encountered.');
// 警告消息
this.notificationSystem.warning('This is a warning message.');
// 普通消息
this.notificationSystem.message('This is a simple message.');除此之外，您可以使用配置属性来自定义通知的样式和位置。当然，您也可以在构建通知时重写这些默认值属性。
-- -------------------- ---- -------
-- -------
------------------------------
-------- -- ------------ ---- ------ ---------
------ -
---------------- ----------
------ ----------
----------- ------
--
--------- ---------------
------------------ ---
---API
constructor(config: Object)
实例化 NotificationSystem 类
参数：
config: Object - 配置属性。包括以下默认值属性：
- defaultStyle: Object - 通知默认样式
- position: String - 通知位置
- easing: String - 过渡效果
- animationDuration: Number - 动画持续时间
- dismissable: Boolean - 是否点击通知消失
show(config: Object)
显示一个通知
参数：
config: Object - 通知配置属性。包括以下默认值属性：
- message: String - 通知消息内容
- type: String - 消息类型（success，error，warning，message）
- style: Object - 通知样式
- position: String - 通知位置
- easing: String - 过渡效果
- animationDuration: Number - 动画持续时间
- dismissable: Boolean - 是否点击通知消失
success(message: String)
显示一个成功通知
参数：
- message: String - 通知消息内容
error(message: String)
显示一个错误通知
参数：
- message: String - 通知消息内容
warning(message: String)
显示一个警告通知
参数：
- message: String - 通知消息内容
message(message: String)
显示一个普通消息
参数：
- message: String - 通知消息内容
示例
以显示一个自定义样式的成功通知为例：
-- -------------------- ---- -------
------------------------------
-------- -- ---------- --------- ---- ------------
----- ----------
------ -
---------------- ----------
------ ----------
----------- ------
-
---总结
react-mobx-notification-system 可以帮助您在 React 应用程序中快速构建用户友好的通知消息。通过本文的介绍，您应该已经了解了该组件基本使用方法和 API，包括如何定制化通知的外观、位置等属性。
在项目中使用该通知系统很容易，您可以按照本文提供的示例代码轻松轻松实现。同时也应该注意通知的内容和风格在项目中需要与应用场景匹配，这也是通知设计的一项重要工作。
在实际开发中，您可能会遇到其他问题或需求。但是，通过学习本文，您已经掌握了本组件的基本使用，相信能够利用相关文档和工具官网对更进一步的学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ca81e8991b448e0120