react封裝Dialog彈框的方法

更新時間：2022年08月23日 15:36:16 作者：Cupid510

這篇文章主要為大家詳細介紹了react封裝Dialog彈框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了react封裝Dialog彈框的具體代碼，供大家參考，具體內(nèi)容如下

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>
? ? );
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: