React实现全局组件的Toast轻提示效果

Toast是常用的轻提示弹框，常用于页面loading和提示语弹窗。

本例基于React实现一个随时可调用且不随页面渲染的全局组件。

需求分析

• Toast 不需要同页面一起被渲染，而是根据需要被随时调用。
• Toast 是一个轻量级的提示组件，它的提示不会打断用户操作，并且会在提示的一段时间后自动关闭。
• Toast 需要提供几种不同的消息类型以适应不同的使用场景。
• Toast 的方法必须足够简洁，以避免不必要的代码冗余。

如何使用

首先引入

JSX中事件调用：

{ Toast.info('普通提示') }}>普通提示

JS中方法调用：

回调方法：

{ Toast.success('加载完成') }) setTimeout(hideLoading,2000)

调用规则：

3个参数：

• content 提示内容string（loading方法为可选）
• duration 提示持续时间 number，单位ms（可选）
• onClose 提示关闭时的回调函数（可选）

{ console.log('回调方法') })) Toast.error("错误") Toast.loading()

代码实现

目录结构：

1. index.js：对外export接口，设置默认的参数值，全局创建或销毁Toast的DIV。
2. toast.js：Toast具体显示的内容及多次调用Toast时的状态管理。
3. toast.css：Toast的样式，费话不多说。

index.js：

function createNotification() {
const div = document.createElement('div')
document.body.appendChild(div)
const notification = ReactDOM.render(,div)
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：

class ToastBox extends Component {
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: 'toast_loading'
}
return (
<div className="toast">
{
notices.map(notice => (

{notice.content}

)) }

) } }

export default ToastBox