notistack--React下Material UI框架的SnackBar(消息条)

　　notistack是React下Material UI框架的SnackBar(消息条)的高级用例，该用例能同时显示多个独立消息条，使用起来也非常简单。在全局初始化之后就可以在网页上任何需要的地方使用它，而不用为每个页面导入一个Material UI原生的消息条。

　　该用例是基于Material UI的SnackBar，做了一下功能和界面封装。下面我们从头来开始学习如何使用它。

一、新建React工程

npx create-react-app notistackdemo

安装相应的库,这里用到的版本号如下

//"notistack": "^1.0.9"

//"@material-ui/core": "^4.0.0"   notistack是基于Matrial UI

npm install @material-ui/core --save  
npm install notistack --save

二、简单使用notistack

　　notistack提供了一个provider，在使用之前必须先初始化这个provider，首先我们将src/index.js稍微增加一点内容改写成这样：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { SnackbarProvider } from 'notistack';

ReactDOM.render(
  <React.StrictMode>
    <SnackbarProvider>
        <App />
    </SnackbarProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

在APP.js文件中加入功能

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button'; //增加一个按钮，用来点击显示消息条
import { useSnackbar } from 'notistack'; //从notistack中引入hook

function App() {
  const { enqueueSnackbar } = useSnackbar();//使用该hook
  const handleClick = event => {
      event.preventDefault();
      enqueueSnackbar("This is a message",{variant:"success"}); //发送成功类型的消息 warning、error、success
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
　　　　　　//点击按钮触发消息
        <Button style={{fontSize:"25px",color:"white",margin:"10px"}} onClick={handleClick}>
            Click Me
        </Button>
      </header>
    </div>
  );
}

export default App;

三、notistack高级用法

在src/目录下新建NotistackWrapper.js

//本JS进行一些notistack的常用设置
import React from 'react';
import { SnackbarProvider } from 'notistack';
import { isMobile } from 'react-device-detect';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close'; //加入关闭消息的功能

/**
* 显示的消息条的最大数量，如果超过，会关掉最先打开的然后再显示新的，是一个队列
* 如果只想显示1个，设置为1，3是默认值
*/
const MAX_SNACKBAR = 3
//设置自动隐藏时间，默认值是5秒
const AUTO_HIDE_DURATION = 10000
//设置消息条位置，默认值为底部左边
const POSITION = {
    vertical: 'bottom',
    horizontal: 'left'
}

export default function NotistackWrapper({children}) {
    const notistackRef = React.createRef();
    const onClickDismiss = key => () => {
        notistackRef.current.closeSnackbar(key);
    }

    return (
        <SnackbarProvider
            maxSnack={MAX_SNACKBAR}
            autoHideDuration={AUTO_HIDE_DURATION}
            anchorOrigin={POSITION}
            dense={isMobile}
            ref={notistackRef}
            action={(key) => (
                <IconButton key="close" aria-label="Close" color="inherit" onClick={onClickDismiss(key)}>
                    <CloseIcon style={{fontSize:"20px"}}/>
                </IconButton>
            )}
        >
            {children}
        </SnackbarProvider>
    )
}

再改写src/index.js，使用刚才自定义包装器来代替SnackbarProvider

import NotistackWrapper from './NotistackWrapper.js'

ReactDOM.render(
    <NotistackWrapper>
        <App />
    </NotistackWrapper>
    ,
    document.getElementById('root'));

这里做了移动端适配，移动端显示时让消息条底部靠边，用react-device-detect库来判断是否移动端，需要进行安装。

npm install  react-device-detect --save

改写点击按钮的函数方法

const handleClick = event => {
    event.preventDefault();
    // variant could be success, error, warning, info, or default
    let options = {
        variant:"success",
        onClose:(_blank,reason) => {
          if(reason === 'clickaway') {
            return;
          }
          
          console.log("close a snackbar")
        }
    };
    enqueueSnackbar("This is a message", options);
};

参考：

https://blog.csdn.net/weixin_39430411/article/details/104049566