react 3 蒙层组件

蒙层效果

index.js

import Test from './compoments/common/Test' 


ReactDOM.render(
  <Test />,
  document.getElementById("root")
)

Test.js

测试组件用的

import React, { Component } from "react";
import Modal from "./Modal";

export default class Test extends Component {
  state = {
    showModal: false
  };

  showModal = () => {
    this.setState({
      showModal: true
    });
  };

  hideModal = () => {
    this.setState({
      showModal: false
    });
  };

  render() {
    return (
      <div>
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600073546254&di=44bd363b9a5087374631dcadbacd5227&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2059882080%2C3277594818%26fm%3D214%26gp%3D0.jpg"
          alt="图片"
        />

        {this.state.showModal ? (
          <Modal onClose={this.hideModal}>
            <h1>蒙层内容</h1>
            <button onClick={this.hideModal}>关闭蒙层</button>
          </Modal>
        ) : null}

        <button onClick={this.showModal}>显示蒙层</button>
      </div>
    );
  }
}

modal.js

蒙层组件

import React from "react";
import "./index.css";

export default function Modal(props) {
  var defaultProps = {
    bg: "rgba(0,0,0,.5)"
  };

  var datas = Object.assign({}, defaultProps, props);

  return (
    <div
      onClick={e => {
        if(e.target.className === "modal" ){
            datas.onClose();
        }

      }}
      className="modal"
      style={{
        background: datas.bg
      }}
    >
      <div className="modal-center">{datas.children}</div>
    </div>
  );
}