React實現動態調用的彈框組件
最近在用react開發項目,遇到一個需求——開發一個彈框組件。在react中創建一個組件是很簡單的,隻需要使用class創建並引入就可以瞭,但是要做到可以用js調用這個組件而不是寫在jsx結構裡,那就需要用到ReactDOM.render這個方法瞭。
首先先來屢一下需求:
1、彈框裡的可配置字段:標題文字,提示文字,確認和取消按鈕的顯示隱藏以及文字。
2、點擊確認和取消按鈕後,可以觸發相應的事件。
3、是否為短提示,短提示的時候,確認和取消按鈕隱藏,並且2s後消失。
接下來用兩種方法創建一個彈框組件,並比較一下這兩種的差異。
下面先來實現一個普通的寫在jsx結構裡的組件:
彈框組件:DialogAlert.js
import React, { Component } from 'react'; import './index.scss'; class DialogAlert extends Component { constructor(props){ super(props); this.state = { alertStatus:false, alertTitle:'提示', //標題 alertTip:'網絡錯誤', //提示 cancelText:'取消', confirmText:'確認', isShortTip:false, //是否為短提示,短提示的情況下不顯示'取消''確認'(且2s後消失),且優先級最高,其他配置無效 isShowCancel:true, //是否顯示確認按鈕 isShowConfirm:true, //是否顯示確認按鈕 cancelCallbackFn:function(){}, //取消 回調函數 confirmCallbackFn:function (){}//確認 回調函數 } } componentWillReceiveProps(nextProps) { let options = nextProps.dialogOpt || {}; //如果是短提示 if(options.isShortTip){ options.isShowCancel = false; options.isShowConfirm = false; setTimeout(()=>{ this.close() },2000) } this.setState({ ...options }) } //取消 cancel = () => { this.state.cancelCallbackFn(); this.close() } //確認 confirm = () => { this.state.confirmCallbackFn(); this.close() } close = () => { this.setState({ alertStatus:false }) } render(){ let opts = this.state; return ( <div className="dialog-wrap" style={opts.alertStatus ? {display:'block'}:{display:'none'}}> <div className="dialog-box"> <h6>{opts.alertTitle}</h6> <p>{opts.alertTip}</p> {!opts.isShowCancel && !opts.isShowConfirm ? null : ( <div> {opts.isShowCancel ? (<span onClick={ () => this.cancel() }>{opts.cancelText}</span>) : null} {opts.isShowConfirm ? (<span className="confirm" onClick={ () => this.confirm() }>{opts.confirmText}</span>) : null} </div> )} </div> </div> ) } } export default DialogAlert;
這裡的數據更新用到瞭componentWillReceiveProps這個生命周期,當props發生變化時執行,初始化render時不執行,在這個回調函數裡面,你可以根據屬性的變化,通過調用this.setState()來更新你的組件狀態,舊的屬性還是可以通過this.props來獲取,這裡調用更新狀態是安全的,並不會觸發額外的render調用。
調用頁面index.js
在state中定義可配置字段的變量
import DialogAlert from '../../widget/DialogAlert/index'; //省略瞭組件的js this.state = { dialogOpt:{ alertStatus:false, alertTip:'我是自定義的內容', cancelText:'取消2', confirmText:'確認2', isShortTip:false, isShowCancel:true, //是否顯示確認按鈕 isShowConfirm:true, //是否顯示確認按鈕 cancelCallbackFn:function(){ alert(0); }, //取消 回調函數 confirmCallbackFn:function (){ alert(1); }//確認 回調函數 }, //其他數據 };
在jsx中埋好對應的組件結構
<div onClick={()=>(this.alertdialog())}>點擊觸發彈框</div> <DialogAlert dialogOpt={this.state.dialogOpt}></DialogAlert>
添加觸發事件
alertdialog(){ let opts = { alertStatus:true } let _dialogOpt = Object.assign(this.state.dialogOpt,opts) this.setState({ dialogOpt:_dialogOpt }) }
這樣就完成一個普通的彈框。總感覺這樣寫的一個組件彈框有點冗餘,復用起來也比較麻煩——在state裡配置所有自定義的變量,並改動jsx結構,還需要註意寫入jsx結構時彈框的層級問題。
接下來我們來實現一種可動態調用的組件:
原理是創建一個div,並插入到body裡面,用這個div當容器,使用render渲染組件,通過改變組件的state來控制組件的顯示和隱藏。
彈框組件:DialogAlert.js
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import './index.scss'; //調用方法 // DialogAlert.open({ // alertTitle:'提示2', // alertTip:"頁面加載失敗,是否重新加載?", // cancelText:'取消', // confirmText:'重新加載', // isShortTip:true, // isShowCancel:true, // isShowConfirm:true, // cancelCallbackFn:function(){ // console.log('取消瞭') // }, // confirmCallbackFn:function (){ // console.log("確認瞭..."); // } // }); class DialogBox extends Component { constructor(props){ super(props); this.state = { alertStatus: false, //是否顯示提示框 alertTitle:'提示', //標題 alertTip:'網絡錯誤', //提示 cancelText:'取消', confirmText:'確認', isShortTip:false, //是否為短提示,短提示的情況下不顯示'取消''確認'(且2s後消失),且優先級最高,其他配置無效 isShowCancel:true, //是否顯示確認按鈕 isShowConfirm:true, //是否顯示確認按鈕 cancelCallbackFn:function(){}, //取消 回調函數 confirmCallbackFn:function (){}//確認 回調函數 } } //打開提示框 open = (options) => { options = options || {}; //如果是短提示 if(options.isShortTip){ options.isShowCancel = false; options.isShowConfirm = false; setTimeout(()=>{ this.close() },2000) } options.alertStatus = true; this.setState({ ...options }) } //取消 cancel = () => { this.state.cancelCallbackFn(); this.close() } //確認 confirm = () => { this.state.confirmCallbackFn(); this.close() } close = () => { this.setState({ alertStatus:false }) } render(){ let opts = this.state; return ( <div className="dialog-wrap" style={opts.alertStatus? {display:'block'}:{display:'none'}}> <div className="dialog-box"> <h6>{opts.alertTitle}</h6> <p>{opts.alertTip}</p> {!opts.isShowCancel && !opts.isShowConfirm ? null : ( <div> {opts.isShowCancel ? (<span onClick={ () => this.cancel() }>{opts.cancelText}</span>) : null} {opts.isShowConfirm ? (<span className="confirm" onClick={ () => this.confirm() }>{opts.confirmText}</span>) : null} </div> )} </div> </div> ) } } let div = document.createElement('div'); document.body.appendChild(div); let DialogAlert = ReactDOM.render(<DialogBox /> ,div); //返回實例 export default DialogAlert;
調用頁面index.js
import DialogAlert from '../../widget/DialogAlert/index'; //省略瞭組件的js DialogAlert.open({ alertTip:"加載失敗,是否重新加載?", confirmText:'重新加載', cancelCallbackFn:()=>{ window.history.back(); }, confirmCallbackFn:()=>{ //todo... } })
這裡用到瞭ReactDOM.render,官方文檔說這個方法目前會返回瞭對根組件實例的引用,所以我們可以調用到裡面的open方法。但是官方文檔中目前應該避免使用返回的引用,因為它是歷史遺留下來的內容。為瞭以後的react更新迭代的兼容,我們可以省去動態插入組件的過程,改為寫在jsx中,並設置ref,使用this.refs.xxx獲取當前組件的實例,以便調用實例方法。
隻需引入之後,直接調用就可以瞭。這樣寫的好處是解決瞭彈框的層級問題,也不用去改動jsx結構,其他頁面復用起來更加方便快捷。
這兩種方法在組件的定義上並沒有很大的不同,隻是在更新狀態的時候有差異。第一種方法是在componentWillReceiveProps這個生命周期中監聽父組件的值的變化再更新到state上,第二中方法是直接調用實例的open方法通過獲取參數將值更新到state上。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 深入理解React State 原理
- React Class組件生命周期及執行順序
- Python可視化神器pyecharts繪制儀表盤
- React setState是異步還是同步原理解析
- Python繪制散點圖之可視化神器pyecharts