摘要:項目中經常會用到類似安卓的的控件。封裝一個這樣的組件是每個項目必須的事情。封裝完成這樣一個組件,具體使用方法如下使用方法第一步第二步需要的地方
項目中經常會用到類似安卓的toast的控件。封裝一個這樣的組件是每個項目必須的事情。
import React from "react"; import ReactDOM from "react-dom"; let seed = 0; const now = Date.now(); function getUuid() { return `rcNotification_${now}_${seed++}`; } class Message extends React.Component { constructor(props) { super(props); this.state = {data: []}; this.add = this.add.bind(this); this.remove = this.remove.bind(this); } add(notice) { console.log("msg123", "add"); this.setState({data: [...this.state.data, notice]}); const that = this; setTimeout((() => that.remove(notice.key)), 2000); } remove(key) { console.log("msg123", "remove"); const temp = this.state.data.filter(item => { const result = item.key != key; return result; }); this.setState({data: [...temp]}); } render() { console.log("msg123", this.state.data); return ({ this.state.data.map(item => { if (item.type == "success") { return); } } let instance; Message.newInstance = function () { if (instance) { return instance; } const div = document.createElement("div"); document.body.appendChild(div); const message = ReactDOM.render({item.msg}; } return{item.msg}; }) }, div); console.log("msg123", "newInstance"); instance = { success(msg) { console.log("msg123", "success"); message.add({type: "success", msg, key: getUuid()}); }, warning(msg) { console.log("msg123", "warning"); message.add({type: "warning", msg, key: getUuid()}); }, component: message, }; return instance; }; export default Message;
封裝完成這樣一個組件,具體使用方法如下:
使用方法:
第一步:
componentWillMount() { this.message = Message.newInstance(); }
第二步需要的地方
this.message.success("xxx"); this.message.warning("xxx);
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95582.html
摘要:所以,從體驗上考慮,這個情況并不屬于問題。一般情況下,這個節點占據了除了通知欄的所有區域。通知給對象的消息,都會被這個內部對象進行處理通過執行處理消息在通知給對象顯示的時候,對象將給對象發送一條消息,并在的函數中執行。 歡迎大家前往云+社區,獲取更多騰訊海量技術實踐干貨哦~ 作者:QQ音樂技術團隊 題記 Toast 作為 Android 系統中最常用的類之一,由于其方便的api設計和...
閱讀 3801·2021-11-24 09:39
閱讀 1810·2021-11-02 14:41
閱讀 814·2019-08-30 15:53
閱讀 3480·2019-08-29 12:43
閱讀 1189·2019-08-29 12:31
閱讀 3087·2019-08-26 13:50
閱讀 795·2019-08-26 13:45
閱讀 987·2019-08-26 10:56