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

Question

我正在使用 material-ui Snackbar创建我的 react 应用程序。在我的项目中，我有很多组件，不想在每个组件中插入 <Snackbar/>。有没有办法创建显示小吃店的功能，然后只需在每个组件中导入并使用此功能？

就像是：

从 'SnackbarUtils' 导入 showSnackbar；

showSnackbar('成功消息');

Answer 1

将其扩展为 Hook，然后您可以调用它一次并使用带有效果的状态来显示：

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.....'})

Answer 2

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

1. 创建一个 HOC，它返回一个带有包装组件的小吃店组件
2. 在该 HOC 中创建一个函数，该函数接受消息、严重性（如果您像我一样使用Alert）、持续时间并设置设置为小吃栏道具的适当状态。并将该函数作为道具传递给wrappedComponent。
3. 最后，在您想要显示小吃店的任何地方导入此 HOC，将您的组件传入其中，并从您想要显示小吃店的事件处理程序中的道具 (this.prop.functionName('Hello there!')) 中调用 HOC 函数并传入一条消息。

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