Toast是常用的轻提示弹框，常用于页面loading和提示语弹窗。
本例基于React实现一个随时可调用且不随页面渲染的全局组件。
需求分析
- Toast 不需要同页面一起被渲染，而是根据需要被随时调用。
- Toast 是一个轻量级的提示组件，它的提示不会打断用户操作，并且会在提示的一段时间后自动关闭。
- Toast 需要提供几种不同的消息类型以适应不同的使用场景。
- Toast 的方法必须足够简洁，以避免不必要的代码冗余。
如何使用
首先引入
JSX中事件调用：
回调方法：
调用规则：
3个参数：
代码实现
目录结构：
- index.js：对外export接口，设置默认的参数值，全局创建或销毁Toast的DIV。
- toast.js：Toast具体显示的内容及多次调用Toast时的状态管理。
- toast.css：Toast的样式，费话不多说。
index.js：
const div = document.createElement('div')
document.body.appendChild(div)
const notification = ReactDOM.render(
return {
addNotice(notice) {
return notification.addNotice(notice)
},destroy() {
ReactDOM.unmountComponentAtNode(div)
document.body.removeChild(div)
}
}
}
let notification
const notice = (type,content,duration = 2000,onClose) => {
if (!notification) notification = createNotification()
return notification.addNotice({ type,duration,onClose })
}
export default {
info(content,onClose) {
return notice('info',onClose)
},success(content = '操作成功',onClose) {
return notice('success',error(content,onClose) {
return notice('error',loading(content = '加载中...',duration = 0,onClose) {
return notice('loading',onClose)
}
}
toast.js：
constructor() {
super()
this.transitionTime = 300
this.state = { notices: [] }
this.removeNotice = this.removeNotice.bind(this)
}
getNoticeKey() {
const { notices } = this.state
return notice-${new Date().getTime()}-${notices.length}
}
addNotice(notice) {
const { notices } = this.state
notice.key = this.getNoticeKey()
// notices.push(notice);//展示所有的提示
notices[0] = notice;//仅展示最后一个提示
this.setState({ notices })
if (notice.duration > 0) {
setTimeout(() => {
this.removeNotice(notice.key)
},notice.duration)
}
return () => { this.removeNotice(notice.key) }}
removeNotice(key) {
const { notices } = this.state
this.setState({
notices: notices.filter((notice) => {
if (notice.key === key) {
if (notice.onClose) setTimeout(notice.onClose,this.transitionTime)
return false
}
return true
})
})
}
render() {
const { notices } = this.state
const icons = {
info: 'toast_info',success: 'toast_success',error: 'toast_error',loading: 'toastloading'
}
return (
<div className="toast">
{
notices.map(notice => (
@H502_83@
