reapop 是一个基于 React 的通知框架，而 reapop-theme-bootstrap 是一个基于 Bootstrap 样式的皮肤。在这篇文章中，我们将详细介绍如何使用 npm 包 reapop-theme-bootstrap，并提供相应的示例代码。
安装和引用
通过 npm 安装 reapop-theme-bootstrap：
npm install reapop-theme-bootstrap
在需要使用的地方引用：
import { Provider } from 'react-redux';
import { actions, constants, Notification, notificationsReducer } from 'reapop';
import { addNotification as notify } from 'reapop';
import 'reapop-theme-bootstrap/dist/reapop.css';
import 'reapop-theme-bootstrap/dist/reapop-theme-bootstrap.css';使用
首先，我们需要在应用程序中使用 Provider 组件提供 store：
-- -------------------- ---- -------
----- ----- - ------------
-----------------------
----------------------
--
----------------
--------- --------------
---- --
------------
------------------------------
--然后在需要显示通知的地方调用 notify 方法：
notify({
title: 'Welcome!',
message: 'You have successfully logged in.',
status: constants.SUCCESS,
dismissible: true,
dismissAfter: 5000
});在上述代码中，我们传递了一些属性：
title：通知的标题message：通知的正文status：通知的类别，可以是constants.SUCCESS、constants.WARNING、constants.ERROR和constants.INFO中的一个dismissible：是否启用关闭按钮dismissAfter：通知自动关闭的时间（单位为毫秒）
最后，我们需要在应用程序中将 NotificationsSystem 组件放置到任意位置。这个组件通过 actions 将所有的通知信息传递到 store 中，实现通知的显示和操作：
import { NotificationsSystem } from 'reapop';
<App>
<div>{/* Your application */}</div>
<NotificationsSystem />
</App>示例代码
下面提供一份示例代码，可以直接使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ -
--------
----------
-------------
--------------------
- ---- ---------
------ - --------------- -- ------ - ---- ---------
------ -----------------------------------------
------ ---------------------------------------------------------
-- ------ -----
----- ----- - ------------
-----------------------
----------------------
--
-- ------
--------
------ -----------
-------- ---- ---- ------------ ------ -----
------- ------------------
------------ -----
------------- ----
---
-- ------
----------------
--------- --------------
---- ----------------------
--- ---- ----------- ---
-------------------- --
------
------------
------------------------------
--结语
本文详细介绍了如何使用 npm 包 reapop-theme-bootstrap，并提供了相应的示例代码。通过学习本文，相信你已经能够轻松地在你的项目中使用这个通知框架了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f16451a403f2923b035c352