react 全局公共组件-----动态弹窗 (dialog)

Posted 2021-01-06 muamaker

react 的时候，总是会用到弹窗，并且各种各样的，一般来说，组件层级嵌套之后，就会出现 z-index层级覆盖的问题

这个时候，就需要一个公共的弹出层，然后我们将需要展示的组件，放到弹出层里面

 

下面是目录结构：

 

dialog.jsx代码

import React, { Component } from ‘react‘;
import { is, fromJS } from ‘immutable‘;
import ReactDOM from ‘react-dom‘;
import ReactCSSTransitionGroup from ‘react-addons-css-transition-group‘;
import ‘./dialog.css‘;


let defaultState = {
  alertStatus:false,
  alertTip:"提示",
  closeDialog:function(){},
  childs:‘‘
}

class Dialog extends Component{

  state = {
    ...defaultState
  };
  // css动画组件设置为目标组件
  FirstChild = props => {
    const childrenArray = React.Children.toArray(props.children);
    return childrenArray[0] || null;
  }
  //打开弹窗
  open =(options)=>{
    options = options || {};
    options.alertStatus = true;
    var props = options.props || {};

    var childs = this.renderChildren(props,options.childrens) || ‘‘;
    console.log(childs);
    this.setState({
      ...defaultState,
      ...options,
      childs
    })
  }
  //关闭弹窗
  close(){
    this.state.closeDialog();
    this.setState({
      ...defaultState
    })
  }
  renderChildren(props,childrens) {
    //遍历所有子组件
    var childs = [];
    childrens = childrens || [];
    var ps = {
        ...props,  //给子组件绑定props
        _close:this.close  //给子组件也绑定一个关闭弹窗的事件     
       };
    childrens.forEach((currentItem,index) => {
        childs.push(React.createElement(
            currentItem,
            {
                ...ps,
                key:index
            }
        ));
    })
    return childs;
  }
  shouldComponentUpdate(nextProps, nextState){
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }
  
  render(){
    return (
      <ReactCSSTransitionGroup
        component={this.FirstChild}
        transitionName=‘hide‘
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}>
        <div className="dialog-con" style={this.state.alertStatus? {display:‘block‘}:{display:‘none‘}}>
            {this.state.childs}
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}

let div = document.createElement(‘div‘);
let props = {
  
};
document.body.appendChild(div);

let Box = ReactDOM.render(React.createElement(
    Dialog,
    props
),div);



export default Box;　　

 

dialog.css源码，，其实就是一个div，遮住层

.dialog-con{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

　　

child.jsx

import React, { Component } from ‘react‘;





class Child extends Component {
	constructor(props){
		super(props);
    	this.state = {date: new Date()};
  }
  showValue=()=>{
    this.props.showValue && this.props.showValue()
  }
  render() {
    return (
      <div className="Child">
       	<div className="content">
           Child
           <button onClick={this.showValue}>调用父的方法</button>
       	</div>
      </div>
    );
  }
}

export default Child;

　　

 

 使用方式：

使用方式，直接调用就可以了，传入需要展示的子组件，并且给子组件绑定 props，可以实现事件通信