最近在写点小项目,使用的是Material UI,这个UI库中没有类似Ant里可以全局使用的message组件,只有Snackbar消息条组件,但这种使用方式显然不够灵活,本来想试试自己造个轮子,但在翻看Material UI的文档时发现Snackbar组件文档最后有一个notistack方案来以更灵活的方式使用Snackbar组件。
本文章中使用依赖的信息
1 | { |
相关文档
开始使用
官方文档对于使用的说明很详细,这里就简单写写。
如果希望直接查看在线代码,请直接跳转至文末本篇代码。
使用 notistack
时必须在外部包裹 SnackbarProvider
组件。
如果使用了Material UI 的 ThemeProvider
组件,则 SnackbarProvider
组件必须位于 ThemeProvider
组件内部。
1 | import { SnackbarProvider } from 'notistack'; |
SnackbarProvider
组件会传入两个方法:enqueueSnackbar
和 closeSnackbar
。
enqueueSnackbar
用于添加一个消息到队列中。官方文档说明
closeSnackbar
用于关闭消息。官方文档说明
在React Class Component中使用
1 | import React from "react"; |
在React Function Component中使用
1 | import { Button } from "@material-ui/core"; |
封装 SnackbarProvider
组件
可以将 SnackbarProvider
组件封装一次,免去后续直接修改根组件文件。
1 | import { SnackbarProvider } from "notistack"; |
在根组件使用 NotistackWrapper
组件替代之前未封装的 SnackbarProvider
组件。