如何将material-ui Snackbar实现为全局函数？答案

【问题标题】：How to implement material-ui Snackbar as a global function?如何将material-ui Snackbar实现为全局函数？
【发布时间】：2021-02-21 13:04:24
【问题描述】：

我正在使用 material-ui Snackbar 创建我的反应应用程序。在我的项目中，我有很多组件，不想在每个组件中插入。有没有办法创建显示小吃栏的函数，然后在每个组件中导入并使用这个函数？

类似：

从 'SnackbarUtils' 导入 showSnackbar；

showSnackbar('成功消息');

【问题讨论】：

标签： javascript reactjs notifications material-ui snackbar

【解决方案1】：

你必须以反应的方式来做。您可以通过创建高阶组件来实现此目的。

创建一个返回 snackbar 组件以及 WrappedComponent 的 HOC
在该 HOC 中创建一个函数，该函数接受消息、严重性（如果您像我一样使用 Alert）、持续时间并设置设置为 props of the snackbar 的适当状态。并将该函数作为 prop 传递给 WrappedComponent。
最后将这个 HOC 导入到任何你想显示快餐栏的地方，将你的组件传入其中，然后在你想要的事件处理程序中从 prop (this.prop.functionName('Hello there!')) 调用 HOC 函数显示一个小吃店并传递一条消息。

看看这个。 https://stackblitz.com/edit/snackbar-hoc?file=src/SnackbarHOC.js

【讨论】：

【解决方案2】：

把它扩展成一个Hook，然后你可以调用一次，用state with effects来展示：

import { useSnackbar } from 'notistack';
import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/material/SvgIcon/SvgIcon";
import React, {Fragment, useEffect, useState} from "react";


const useNotification = () => {
    const [conf, setConf] = useState({});
    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
    const action = key => (
        <Fragment>
            <IconButton onClick={() => { closeSnackbar(key) }}>
                <CloseIcon />
            </IconButton>
        </Fragment>
    );
    useEffect(()=>{
        if(conf?.msg){
            let variant = 'info';
            if(conf.variant){
                variant = conf.variant;
            }
            enqueueSnackbar(conf.msg, {
                variant: variant,
                autoHideDuration: 5000,
                action
            });
        }
    },[conf]);
    return [conf, setConf];
};

export default useNotification;

然后就可以使用了：

const [msg, sendNotification] = useNotification();

sendNotification({msg: 'yourmessage', variant: 'error/info.....'})

【讨论】：