在 Web 开发中，消息通知是一个必要且重要的功能。当我们需要向用户提供一些事件反馈或者表单提交成功/失败的消息时，可以使用 flash-message-redux 这个 npm 包来方便地实现。它是基于 React 和 Redux 技术构建的，具有简单易用、高度可定制的特点。下面就让我们来看一下如何使用 flash-message-redux 实现前端消息通知。
安装
安装方法很简单，只需要在终端运行以下命令即可：
npm install flash-message-redux --save
基本使用
引入
安装完成后，在需要使用消息通知的组件中引入 flash-message-redux：
import { showFlashMessage, hideFlashMessage } from 'flash-message-redux';显示消息
在需要显示消息的地方，例如表单提交成功后，我们可以调用 showFlashMessage 方法：
showFlashMessage({
message: '表单提交成功！',
type: 'success',
duration: 5000,
});其中，message 表示消息内容，type 表示消息类型，duration 表示消息显示时间（毫秒）。
type 可以是以下几种类型之一：
- success 成功消息
- error 错误消息
- warning 警告消息
- info 普通消息
隐藏消息
当用户想快速关闭消息框时，可以调用 hideFlashMessage 方法：
hideFlashMessage();
组件使用
为了方便使用，FlashMessage 组件已经被包含在 flash-message-redux 中了。我们只需要在 React 中引入组件即可使用：
import { FlashMessage } from 'flash-message-redux';
// 在 render 方法中添加以下代码
<FlashMessage />我们可以使用 FlashMessage 组件样式和文本内容来完全自定义消息框。同时，我们还可以使用 connect 高阶组件将消息框与 Redux 状态连接起来，实现更多自定义功能。
实例
下面是一个简单的使用示例，演示如何在表单提交后显示消息通知：
-- -------------------- ---- -------
------ - ----------------- ----------------- ------------ - ---- ----------------------
----- ------------- ------- --------------- -
------------ - ------- -- -
-----------------------
-- ------
------------------
-------- ----------
----- ----------
--------- -----
---
-
-------- -
------ -
-----
----- -----------------------------
--- ------ ---
-------
------------- --
------
--
-
-通过以上代码，我们可以在表单提交成功后，显示一条成功消息，并在 5 秒后自动关闭。如需要手动关闭，只需要点击通知框即可。
总结
flash-message-redux 是一个方便易用的前端消息通知库，可以让我们更加便捷地向用户提供消息反馈和表单提交成功/失败的消息。同时，它也可以被高度定制和扩展，支持丰富的消息类型和自定义功能。 在我们的 Web 开发中，它是一个非常实用的工具，值得使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c4c81e8991b448ebd0e