如何在React应用全局复用MUI Snackbar并简化调用方式？

要解决你提到的「重复维护状态」和「全局复用」问题，最简洁的方案是用React Context封装Snackbar，配合自定义Hook提供统一调用方法，实现像showMessage这样的极简调用方式。

1. 创建全局Snackbar上下文与Provider #

新建SnackbarProvider.tsx文件，把状态管理和组件封装在一起：

import { createContext, useContext, useState, useCallback } from 'react';
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert';

// 创建上下文，定义调用方法类型
const SnackbarContext = createContext({
  showMessage: (message: string, severity: 'success' | 'error' | 'info' | 'warning') => {}
});

export const SnackbarProvider = ({ children }) => {
  // 管理Snackbar核心状态
  const [open, setOpen] = useState(false);
  const [message, setMessage] = useState('');
  const [severity, setSeverity] = useState<'success' | 'error' | 'info' | 'warning'>('success');

  // 封装统一的消息展示方法
  const showMessage = useCallback((msg, sev) => {
    setMessage(msg);
    setSeverity(sev);
    setOpen(true);
  }, []);

  // 关闭Snackbar的回调
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <SnackbarContext.Provider value={{ showMessage }}>
      {children}
      {/* 全局唯一的Snackbar实例 */}
      <Snackbar
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert severity={severity} onClose={handleClose} sx={{ width: '100%' }}>
          {message}
        </Alert>
      </Snackbar>
    </SnackbarContext.Provider>
  );
};

// 自定义Hook，简化上下文调用
export const useSnackbar = () => {
  return useContext(SnackbarContext);
};

2. 在应用根组件中注入Provider #

修改根组件（如App.tsx），用SnackbarProvider包裹整个应用：

import { SnackbarProvider } from './SnackbarProvider';

function App() {
  return (
    <SnackbarProvider>
      {/* 放置你的所有应用组件 */}
    </SnackbarProvider>
  );
}

export default App;

3. 在任意组件中调用简化的showMessage方法 #

现在可以在任何组件里，通过自定义Hook获取showMessage方法，实现极简调用：

import { useSnackbar } from './SnackbarProvider';

const DataSender = () => {
  // 顶层获取showMessage方法
  const { showMessage } = useSnackbar();

  const sendData = () => {
    fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify({ /* 数据内容 */ })
    })
    .then(() => {
      showMessage("数据发送成功", "success");
    })
    .catch((err) => {
      showMessage("请求发送失败，请重试", "error");
    });
  };

  return <button onClick={sendData}>提交数据</button>;
};

export default DataSender;

4. 可选扩展功能 #

如果需要更灵活的配置，可扩展showMessage方法支持自定义时长、位置：

// 修改showMessage参数
const showMessage = useCallback((msg, sev, options = {}) => {
  setMessage(msg);
  setSeverity(sev);
  setDuration(options.duration || 6000);
  setPosition(options.position || { vertical: 'bottom', horizontal: 'center' });
  setOpen(true);
}, []);

// 调用时自定义配置
showMessage("自定义消息", "info", { duration: 10000, position: { vertical: 'top', horizontal: 'right' } });

内容的提问来源于stack exchange，提问作者LA.27