React实现pc端的弹出框效果_React_

import React,{Component} from 'react'  import '../dialog.css' export default class Dialog extends Component {     constructor(props){        super(props);        this.state={}     }     render(){         return (             
                 
                     ×                 
             
         );     } }

.mask{     width: 100%;     height: 100%;     position: fixed;     left: 0;     right: 0;     background-color: #000;     opacity: 0.4;     color:#f00; } .content{     position: fixed;     height: 300px;     width: 300px;     left: 50%;     top:50%;     background-color: #fff;     transform: translate(-50%,-50%); }

import  React,{Component } from 'react' import ReactDOM from 'react-dom' import Dialog from './components/Dailog'; import './index.css' class Parent extends Component {     constructor(props){         super(props);         this.state={display:'block'};         this.tan=this.tan.bind(this);         this.hide=this.hide.bind(this);     }     tan(){         console.log(this);         this.setState({display:'block'})     }     hide(){         this.setState({display:'none'})     }     render(){         return (             
                // 就是这里 不知道为什么我一把组件放到按钮下面  遮罩层 就不会覆盖掉按钮 很奇怪                 
                 弹出             
         );     } } ReactDOM.render(
,document.getElementById('root'))

  // 父类 通过props传递过去  ×   // 子类调用