react封裝Dialog彈框的方法
更新時(shí)間：2022年08月23日 15:36:16 作者：Cupid510
這篇文章主要為大家詳細(xì)介紹了react封裝Dialog彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-10-10
本篇文章中主要介紹了詳解React中的組件通信問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07
react?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 用戶并顯示他們的信息,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
React的useEffect Hook它允許我們?cè)诤瘮?shù)組件中執(zhí)行副作用操作,但在使用過程中可能會(huì)遇到一些常見的錯(cuò)誤,本文就來(lái)介紹一下常見問題及解決,感興趣的可以了解一下2023-10-10
深入理解react-router 路由的實(shí)現(xiàn)原理
這篇文章主要介紹了深入理解react-router 路由的實(shí)現(xiàn)原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09
詳解一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置
這篇文章主要介紹了詳解一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-01-01
lazy是React提供的懶（動(dòng)態(tài)）加載組件的方法，React.lazy()，路由組件代碼會(huì)被分開打包，能減少打包體積、延遲加載首屏不需要渲染的組件，依賴內(nèi)置組件Suspense標(biāo)簽的fallback屬性，給lazy加上loading指示器組件，Suspense目前只和lazy配合實(shí)現(xiàn)組件等待加載指示器的功能2023-03-03
react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解
這篇文章主要為大家介紹了react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05