如何将React封装的Dialog弹框方法改写成长尾？

本文共计364个文字，预计阅读时间需要2分钟。

React组件示例：封装Dialog弹框组件

javascriptimport React, { Component, Children } from 'react';import { createPortal } from 'react-dom';import './static/css/Dialog.sass';

本文实例为大家分享了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>     );   } }

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