React 如何封装消息提示组件message--Material-UI

近期项目在使用Material-UI ，Material-UI 的消息提示组件是<Alert />，<Alert />没有主动提示的能力，属于被动组件，需要在页面中嵌入，然后通过属性open的true/false进行控制，在寻常的页面开发中使用到无大碍，但是不能运用到工具类的js中，如独立封装的axios；axios的独立分装意外要脱离页面，统一封装，拦截过滤。这个时候<Alert />就显得无能为力了，只能另行封装。

这里没有重新封装一个新的组件，而是使用Material-UI组件库中的Alert、Snackbar组合封装组件。

Snackbar API（只介绍需要用到的）：

open: Boolean类型 true/false，控制消息框关闭

autoHideDuration：Number，控制显示时间

anchorOrigin： Object，控制消息体显示位置

onClose：主动关闭事件

Alert

ref 则会被传递到根元素中。

variant 'filled'
| 'outlined'
| 'standard'
| string

severity 'error'
| 'info'
| 'success'
| 'warning'

React.forwardRef：引用传递（Ref forwading）是一种通过组件向子组件自动传递 引用ref 的技术。对于应用者的大多数组件来说没什么作用。但是对于有些重复使用的组件，可能有用

第一步：封装一个Message

function Message(props) {const { content, duration, type } = {...props};// 开关控制：默认true,调用时会直接打开const [open, setOpen] = React.useState(true);// 关闭消息提示const handleClose = (event, reason) => {setOpen(false);};return <Snackbaropen={open}autoHideDuration={duration}anchorOrigin={{ vertical: 'top', horizontal: 'center' }}onClose={handleClose}><Alert severity={type}>{content}</Alert></Snackbar>
}

第二部：引用Message，并定义message的主动事件

const message = {dom: null,success({content, duration}) {// 创建一个domthis.dom = document.createElement('div');// 定义组件， const JSXdom = (<Message content={content} duration={duration} type='success'></Message>);// 渲染DOMReactDOM.render(JSXdom,this.dom)// 置入到body节点下document.body.appendChild(this.dom);},error({content, duration}) {this.dom = document.createElement('div');const JSXdom = (<Message content={content} duration={duration} type='error'></Message>);ReactDOM.render(JSXdom,this.dom)document.body.appendChild(this.dom);},warning({content, duration}) {this.dom = document.createElement('div');const JSXdom = (<Message content={content} duration={duration} type='warning'></Message>);ReactDOM.render(JSXdom,this.dom)document.body.appendChild(this.dom);},info({content, duration}) {this.dom = document.createElement('div');const JSXdom = (<Message content={content} duration={duration} type='warning'></Message>);ReactDOM.render(JSXdom,this.dom)document.body.appendChild(this.dom);}
};export default message;

从上述代码看思路很简单：第一步先决定提示消息的样式，有现成的用现成的组件组合；第二部，研究参数，把参数预置好，这里一些不会变化的参数值写死，变化的参数动态通过父组件传入即可；第三步，就是封装能力，根据不同的提示传入不同的参数，达到效果

引用如下：

if (status === 426 || status === 428 || status === 403) {message.error({content: response.data.msg,  duration: 2000})
}

if (status === 200) {message.success({content: i18n.t('message.loaded'),  duration: 1500})
}if (status === 404) {message.error({content: i18n.t('message.http404'),  duration: 1500})return null
}

React 如何封装消息提示组件message--Material-UI相关推荐

ElementUI 消息提示组件Message
目录官方地址应用场景基本用法通知类型偏移量使用HTML代码片段开启关闭按钮文字内容居中自定义图标iconClass onClose close实例方法全局引入单独引用 Optio ...
Message消息提示组件的原理
Message消息提示是这样的页面提示如果你在使用Vue那可能会使用element-ui中消息提示,如果你在使用React,那么可能会使用ant-design的消息提示.他们的原理都相似,这篇文章将 ...
最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
本文完整版:<最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评> Vue 实时消息提示通知 Vue-notification - 专注实 ...
Tooltip是一个消息提示组件
Tooltip是一个消息提示组件,当用户点击或者长按时显示提示,在屏幕阅读器能够使它语音化,这有助于视力障碍人士阅读,用法如下: Tooltip(message: '这是提示',child: Icon ...
ymPrompt.js消息提示组件
详细说明: http://www.ajaxbbs.net/test/ymPrompt4.0/demo.html 1.在页面中引入ymPrompt.js.如:<script type=" ...
纯js消息弹窗组件Message
js消息弹窗组件文章目录 js消息弹窗组件 1. js部分代码 2.使用方法 3.演示效果写组件上瘾,今天写一个纯js消息弹窗组件,复制即可使用,css也写在了js之中,用js生成,代码若是存在不 ...
一款优雅的消息提示插件Message.js
Message.js 插件描述: 一款优雅的原生JS页面消息提示插件,兼容性良好,无任何依赖. Git: Gitee | GitHub 插件预览:Message.js 声明: 此插件非笔者原创,笔者只 ...
微信小程序—封装消息提示框wx.showToast()方法
封装showToast方法: /*** 消息提示框* @param {*} msg 提示的内容* @param {*} status 图标*/ function showToast(msg, stat ...
Android消息提示框及CheckBox组件
目录一.Toast(消息提示框) 1.创建显示普通文本的Toast 2.创建显示带图片的Toast 二.CheckBox组件 1.在CheckBox在XML文件中的基本语法 2.CheckBox 选 ...

React 如何封装消息提示组件message--Material-UI

React 如何封装消息提示组件message--Material-UI相关推荐

最新文章

热门文章