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

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

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

 

下面是目录结构:

react 全局公共组件-----动态弹窗 (dialog)_第1张图片

 

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 (
      
        
{this.state.childs}
); } } 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 (
      
Child
); } } export default Child;

  

 

 使用方式:

react 全局公共组件-----动态弹窗 (dialog)_第2张图片

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

 

转载于:https://www.cnblogs.com/muamaker/p/9640542.html

你可能感兴趣的:(react 全局公共组件-----动态弹窗 (dialog))