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

Posted 2023-02-22

【中文标题】如何将material-ui Snackbar实现为全局函数？

【英文标题】：How to implement material-ui Snackbar as a global function?

【发布时间】：2021-02-21 13:04:24

【问题描述】：

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

类似：

从 'SnackbarUtils' 导入 showSnackbar；

showSnackbar('成功消息');

【参考方案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.....')