react封装Dialog弹框的方法

本文实例为大家分享了react封装Dialog弹框的具体代码，供大家参考，具体内容如下

Dialog.js

import React, { Component, Children } from "react";
import { createPortal } from "react-dom";
import "static/css/Dialog.scss"
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 { children, hideDialog, hide } = this.props;
? ? let tem = hide ? "hidden" : "";
? ? console.log("hide", tem);
? ? return createPortal(
? ? ? <div className="dialogBox" style={{ visibility: tem }}>
? ? ? ? <div className="dialog">
? ? ? ? ? {children}
? ? ? ? ? <button onClick={hideDialog}>close</button>
? ? ? ? </div>
? ? ? </div>,
? ? ? this.node
? ? );
? }
}

Dialog.scss

.dialogBox {
? position: fixed;
? top: 0;
? right: 0;
? bottom: 0;
? left: 0;
? margin: auto;
? width: 100%;
? height: 100%;
? background: rgba($color: #000000, $alpha: 0.5);
? display: flex;
? justify-content: center;
? align-items: center;
? .dialog{
? width: 50%;
? height: 50%;
? text-align: center;;
? background-color: #fff;
? }
}

DialogPage.js 使用

/*
?* @Author: shihaixia
?* @Date: 2022-02-24 09:58:02
?* @Description:?
?*/
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}>切换</Button>
? ? ? ? {showDialog && (
? ? ? ? ? <Dialog hideDialog={this.handleShowDialog} hide={false}>
? ? ? ? ? ? <h3>标题</h3>
? ? ? ? ? ? <p>这是一个弹窗</p>
? ? ? ? ? </Dialog>
? ? ? ? )}
? ? ? </div>
? ? );
? }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于react封装Dialog弹框的方法的详细内容...