博客
关于我
Material UI框架下SnackBar(消息条)的高级用例--notistack
阅读量:803 次
发布时间:2019-03-25

本文共 2283 字,大约阅读时间需要 7 分钟。

使用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}
);}

七、总结

notistack 是一个功能强大的消息条组件,能够在 React 应用中无缝实现多个消息条的显示。通过简单的配置,可以实现消息条的定位、定时自动隐藏以及自定义样式等功能。在实际使用中,建议谨慎使用闭包回调函数,并结合 Material UI 统一风格进行界面设计,以提升用户体验。


提示与注意事项

  • src/index.js 中保证 SnackbarProvider 正确嵌入。
  • 对于移动端适配,建议使用 react-device-detect 来判断设备类型。
  • 确保关闭回调函数的唯一性,避免误操作。
  • 鼓励在项目启动前仔细阅读 notistack 的官方文档,以充分利用其功能。
  • 转载地址:http://ltpyk.baihongyu.com/

    你可能感兴趣的文章
    Mysql学习总结(19)——Mysql无法创建外键的原因
    查看>>
    Mysql学习总结(1)——常用sql语句汇总
    查看>>
    Mysql学习总结(20)——MySQL数据库优化的最佳实践
    查看>>
    Mysql学习总结(21)——MySQL数据库常见面试题
    查看>>
    Mysql学习总结(22)——Mysql数据库中制作千万级测试表
    查看>>
    Mysql学习总结(23)——MySQL统计函数和分组查询
    查看>>
    Mysql学习总结(24)——MySQL多表查询合并结果和内连接查询
    查看>>
    Mysql学习总结(25)——MySQL外连接查询
    查看>>
    Mysql学习总结(26)——MySQL子查询
    查看>>
    Mysql学习总结(27)——Mysql数据库字符串函数
    查看>>
    Mysql学习总结(28)——MySQL建表规范与常见问题
    查看>>
    Mysql学习总结(29)——MySQL中CHAR和VARCHAR
    查看>>
    Mysql学习总结(2)——Mysql超详细Window安装教程
    查看>>
    Mysql学习总结(30)——MySQL 索引详解大全
    查看>>
    Mysql学习总结(31)——MySql使用建议,尽量避免这些问题
    查看>>
    Mysql学习总结(32)——MySQL分页技术详解
    查看>>
    Mysql学习总结(33)——阿里云centos配置MySQL主从复制
    查看>>
    Mysql学习总结(34)——Mysql 彻底解决中文乱码的问题
    查看>>
    Mysql学习总结(35)——Mysql两千万数据优化及迁移
    查看>>
    Mysql学习总结(36)——Mysql查询优化
    查看>>