如何用react封裝一款Toast 控制元件

語言: CN / TW / HK

theme: channing-cyan highlight: night-owl


這是我參與11月更文挑戰的第13天,活動詳情檢視:[2021最後一次更文挑戰](https://juejin.cn/post/7023643374569816095/ "https://juejin.cn/post/7023643374569816095/") > TIP 👉 **嗚呼!楚雖三戶能亡秦,豈有堂堂中國空無人!____陸游《金錯刀行》**

前言

Web Component是前端界一直非常熱衷的一個領域,用第三方元件化的框架去實現的話,你需要依賴框架本身很多東西,很多時候我們只是簡單的幾個元件,不是很大,也不是很多,所以為了保證元件的`輕量,簡單`,其實這個時候我們並不想採用第三方的框架。 # Toast 控制元件 ### import ```js import Toast from '@/components/Toast/index'; ``` ### Props ##### 無 (元件無props,邏輯控制在index.js裡面) ### 用法如下 ##### 引數詳情 * content:提示自定義資訊,預設是有 '操作成功'、'載入中...' * duration:自定義toast關閉時間,預設是2000 * onClose:true/false 是否關閉標識 ``` Toast.info(content, duration, onClose) Toast.success(content, duration, onClose) Toast.error(content, duration, onClose) Toast.loading(content, duration, onClose) ``` ```js import React, { Component } from 'react' import './Toast.scss' 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 return (
{ notices.map(notice => (
{notice.content}
)) }
) } } export default ToastBox ``` 樣式這塊就先不放了 「歡迎在評論區討論」 #### 希望看完的朋友可以給個贊,鼓勵一下