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