最近的前端开发中，经常需要用到 snackbar（类似于消息提醒），而 @layflags/react-redux-snackbar 是一款优秀的 React 的 snackbar 库，下面将会介绍如何在项目中使用它。
安装
使用 npm 安装：
npm install @layflags/react-redux-snackbar
引入
在项目中引入该库：
-- -------------------- ---- -------
------ - ----------------- ------------ - ---- ---------------------------------
-------- ------- -
------ -
------------------
----- --
-------------------
--
-
------ ------- --------------------其中 SnackbarProvider 被用作 Snackbar 组件容器，通过将其嵌套在最外层，我们可以在整个应用中使用 Snackbar 组件。withSnackbar 是一个高阶组件，用于包装我们的组件，使其能够访问 Snackbar 属性。
使用
使用 Snackbar 组件：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------------------
-------- ------ -
----- - --------------- - - --------------
----- ----------- - -- -- -
---------------------- -------- - -------- --------- ---
-
------ -
------- --------------------------- -----------
--
-
------ ------- -----上述代码将在点击按钮时显示提示框，内容为 'Hello World!'。
配置
Snackbar 支持的属性：
- message：文本消息的内容
- open：提示是否是开启的
- onClose：点击提示自动关闭的回调函数
- autoHideDuration：自动关闭的持续时间
- variant：可以是 success、warning、error 或 info
- anchorOrigin：弹窗所在的方向，默认在底部中间
示例代码：
-- -------------------- ---- -------
---------------------- -------- -
-------- ----------
----------------- -----
------------- -
--------- ------
----------- --------
--
-------- -- -- --------------------- --- ------------
--##总结
以上是 @layflags/react-redux-snackbar 的使用教程，不论是在 React 应用中使用 snackbar 组件，还是了解高阶组件的定义与使用，@layflags/react-redux-snackbar 都是很好的参考。希望此文能对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b081e8991b448e2f08