8、弹窗组件

弹窗类组件的要求弹窗内容在A处声明，却在B处展示。react中相当于弹窗内容看起来被render到⼀个组件⾥⾯ 去，

实际改变的是⽹⻚上另⼀处的DOM结构。

父组件：

import React, { Component } from "react";
import { Button } from "antd";
import Dialog from "../components/Dialog";

export default class DialogPage extends Component{
    constructor(props){
        super(props)
        this.state={
            showDialog:false
        }
    }
    handleShowDialog=()=>{
        this.setState({
            showDialog:!this.state.showDialog
        })
    };
    render() {
        const { showDialog } = this.state;
        return (
          <div className="dialogPage">
            <h1>DialogPage</h1>
            <Button onClick={this.handleShowDialog}>dialog toggle</Button>
            {showDialog && (
              <Dialog hideDialog={this.handleShowDialog} hide={false}>
                这是一个弹窗
              </Dialog>
            )}
          </div>
        );
      }
    }

子组件：

import React,{Component} from 'react';
import {createPortal} from 'react-dom'


export default class Dialog extends Component{
    constructor(props){
        super(props);
        const doc = window.document;
        this.node = doc.createElement("div");
        doc.body.appendChild(this.node)
    }
   
    componentWillUnmount(){
        window.document.body.removeChild(this.node);
    }
    render(){
        const {hideDialog, children, hide} = this.props;
        console.log('children', children)
        
        let tem = hide ? 'hidden' :"";
        return createPortal(
            <div className="dialog" style={{ visibility: tem }}>
                {typeof hideDialog==="function" && (
                    <button onClick={hideDialog}>关闭弹窗</button>)}
                    {children}
            </div>,
            this.node
        )
    }
    
}

dialog css样式

 

.dialog {

   position: absolute;

   top: 0;

   right: 0;

   bottom: 0;

   left: 0;

   line-height: 30px;

   width: 400px;

   height: 300px;

   transform: translate(50%, 50%);

    border: solid 1px gray;

    text-align: center;

}