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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React Native可定制底板組件Magic Sheet使用示例
這篇文章主要為大家介紹了React Native可定制的底板組件Magic Sheet使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10react?express實現(xiàn)webssh?demo解析
這篇文章主要為大家介紹了詳解react?express實現(xiàn)webssh?demo解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04深入理解react-router 路由的實現(xiàn)原理
這篇文章主要介紹了深入理解react-router 路由的實現(xiàn)原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09詳解一個基于react+webpack的多頁面應(yīng)用配置
這篇文章主要介紹了詳解一個基于react+webpack的多頁面應(yīng)用配置,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解
這篇文章主要為大家介紹了react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05