react封裝Dialog彈框的方法
本文實(shí)例為大家分享了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>標(biāo)題</h3> ? ? ? ? ? ? <p>這是一個(gè)彈窗</p> ? ? ? ? ? </Dialog> ? ? ? ? )} ? ? ? </div> ? ? ); ? } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React Native可定制底板組件Magic Sheet使用示例
這篇文章主要為大家介紹了React Native可定制的底板組件Magic Sheet使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10使用store來(lái)優(yōu)化React組件的方法
這篇文章主要介紹了使用store來(lái)優(yōu)化React組件的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10react?express實(shí)現(xiàn)webssh?demo解析
這篇文章主要為大家介紹了詳解react?express實(shí)現(xiàn)webssh?demo解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04基于React實(shí)現(xiàn)搜索GitHub用戶功能
在本篇博客中,我們將介紹如何在 React 應(yīng)用中搜索 GitHub 用戶并顯示他們的信息,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02React中useEffect Hook常見問(wèn)題及解決
React的useEffect Hook它允許我們?cè)诤瘮?shù)組件中執(zhí)行副作用操作,但在使用過(guò)程中可能會(huì)遇到一些常見的錯(cuò)誤,本文就來(lái)介紹一下常見問(wèn)題及解決,感興趣的可以了解一下2023-10-10深入理解react-router 路由的實(shí)現(xiàn)原理
這篇文章主要介紹了深入理解react-router 路由的實(shí)現(xiàn)原理,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09詳解一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置
這篇文章主要介紹了詳解一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解
這篇文章主要為大家介紹了react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05