React实现动态调用的弹框组件.docxVIP

第

React实现动态调用的弹框组件

最近在用react开发项目，遇到一个需求开发一个弹框组件。在react中创建一个组件是很简单的，只需要使用class创建并引入就可以了，但是要做到可以用js调用这个组件而不是写在jsx结构里，那就需要用到ReactDOM.render这个方法了。

首先先来屡一下需求：

1、弹框里的可配置字段：标题文字，提示文字，确认和取消按钮的显示隐藏以及文字。

2、点击确认和取消按钮后，可以触发相应的事件。

3、是否为短提示，短提示的时候，确认和取消按钮隐藏，并且2s后消失。

接下来用两种方法创建一个弹框组件，并比较一下这两种的差异。

下面先来实现一个普通的写在jsx结构里的组件：

弹框组件：DialogAlert.js

importReact,{Component}fromreact;

import./index.scss;

classDialogAlertextendsComponent{

??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){

????letoptions=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(){

????letopts=this.state;

????return(

??????divclassName=dialog-wrapblock}:{display:none}}

????????divclassName=dialog-box

??????????h6{opts.alertTitle}/h6

??????????p{opts.alertTip}/p

??????????{!opts.isShowCancel!opts.isShowConfirmnull:(

????????????div

??????????????{op