使用React和Material UI的notistack组件实现高级消息条功能

一、介绍notistack

notistack 是 React 下基于 Material UI 的SnackBar 组件的高级封装，用来实现多个消息条的显示。它之所以备受欢迎，是因为其简单易用且功能丰富，能够满足大多数页面的消息显示需求，同时避免了为每个页面手动导入 Material UI 原生组件的麻烦。

二、安装依赖

1. 创建 React 项目

npx create-react-app notistackdemo

2. 安装相关库

cd notistackdemosudo npm install @material-ui/core --savesudo npm install @material-ui/icons --savesudo npm install notistack --save

三、初次使用

1. 初始化 SnackbarProvider

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';import { SnackbarProvider } from 'notistack';ReactDOM.render(  
       
          
         
    ,  document.getElementById('root'));

2. 增加消息显示按钮

import React from 'react';import Button from '@material-ui/core/Button';import { useSnackbar } from 'notistack';function App() {  const { enqueueSnackbar } = useSnackbar();  const handleClick = (event) => {    enqueueSnackbar('消息内容', { variant: 'success' });  };  return (    
         
        
   
  );}export default App;

四、高级功能示例

1. 自定义消息条数量和时间

// src/NotistackWrapper.jsconst MAX_SNACKBAR = 3;const AUTO_HIDE_DURATION = 3000;const POSITION = { vertical: 'bottom', horizontal: 'left' };export default function NotistackWrapper({ children }) {  return (    
   
          {children}    
     );}

2. 移动端适配

npm install react-device-detect --save

五、消息条关闭回调

1. 定义回调函数

const handleClick = (event) => {  event.preventDefault();  enqueueSnackbar('消息内容', {    variant: 'success',    onClose: () => console.log('消息条关闭了')  });};

六、消息条关闭按钮

1. 增加关闭按钮

// src/NotistackWrapper.jsimport IconButton from '@material-ui/core/IconButton';import CloseIcon from '@material-ui/icons/Close';export default NotistackWrapper {  const onClickDismiss = (key) => {    notistackRef.current.closeSnackbar(key);  };  return (    
         
    
      (          
     
       onClickDismiss(key)}          >            
                
             )}      >        {children}      
        
   
  );}