在现代 Web 开发中，前端框架和库已经成为开发中必不可少的工具。React.js 是一个非常流行的前端框架，它可以帮助我们更高效地构建复杂的用户界面。其中一个常用的 React.js 的包是 react-notifys，它可以让我们更加简单和方便地实现通知功能。在本篇文章中，我们将详细介绍 react-notifys 的使用方法。
安装
使用 npm 来安装 react-notifys，可以在终端输入下面的命令：
npm install react-notifys --save
引入
在使用代码前，我们需要引入 react-notifys：
import Notifications from 'react-notifys'; import 'react-notifys/dist/notifications.css';
基本使用
在引入 react-nofitys 后，就可以开始使用了。我们先看一下最基本的用法。以下演示了如何在 React 组件中使用 Notifications：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------- ---- ----------------
------ ---------------------------------------
----- --- ------- --------- -
------ - -- -- -
------------------------------ -
--------- ---------------
---------- -----
---
-
-------- -
------ -
-----
------- ---------------------------------
-------------- --
------
--
-
-
------ ------- ----上面的代码演示了如何创建一个成功通知。通知的内容通过第一个参数传递，第二个参数是一个选项对象，可以设置通知的位置、自动关闭时间等。如果不设置选项，通知将会出现在屏幕的正中央，并且不会自动关闭。
全局配置
如果你想在所有的通知中使用同样的配置，你可以在你的 index.js 文件里配置全局默认选项：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- ------ ------------- ---- ---------------- ------------------------- --------- --------------- ---------- ----- --- -------------------- --- ---------------------------------
在 configure() 方法中，我们把全局默认位置设置为屏幕的右下角，自动关闭时间设置为 3 秒。
自定义通知
react-notifys 允许你使用自定义的组件作为通知的内容。下面是一个自定义组件的例子：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------------ - -- ------ ------- -- -- -
---- --------------------------------
----------------
----------------
------
--
------ ------- -------------------CustomNotification 组件接受两个属性，title 和 message，用来显示通知的标题和内容。
使用自定义组件作为通知的内容：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------- ---- ----------------
------ ------------------ ---- -----------------------
------ ---------------------------------------
----- --- ------- --------- -
------ - -- -- -
----------------------------------------- ------------- ------------------- ----
-
-------- -
------ -
-----
------- ---------------------------------
-------------- --
------
--
-
-
------ ------- ----总结
在本文中，我们学习了如何使用 react-notifys 包来实现通知功能。我们介绍了 react-notifys 的安装和引入方法，以及其基本使用、全局配置和自定义组件等高级用法。通过本文的指导，你可以在你的 React 项目中非常方便地添加通知功能，提高了你项目的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567bd81e8991b448e4020