react封裝Dialog彈框的方法
更新時間：2022年08月23日 15:36:16 作者：Cupid510
這篇文章主要為大家詳細(xì)介紹了react封裝Dialog彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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>這是一個彈窗</p>
? ? ? ? ? </Dialog>
? ? ? ? )}
? ? ? </div>
? ? );
? }
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React hooks的優(yōu)缺點詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
react使用useImperativeHandle示例詳解
這篇文章主要為大家介紹了react使用useImperativeHandle示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了react中的渲染機制以及相關(guān)的優(yōu)化方案，內(nèi)容包括react渲染步驟、concurrent機制以及產(chǎn)生作用的機會，簡單模擬實現(xiàn) concurrent mode，基于作業(yè)調(diào)度優(yōu)先級的思路進行項目優(yōu)化的兩個hooks，感興趣的小伙伴跟著小編一起來看看吧2023-07-07
React Fiber樹的創(chuàng)建和替換過程運用了雙緩存技術(shù)，直接將舊的 fiber 樹替換成新的 fiber 樹，這樣做的好處是省去了直接在頁面上渲染時的計算時間，避免計算量大導(dǎo)致的白屏、卡頓，現(xiàn)在你一定還不太理解，下面進行詳細(xì)講解,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了react中的props 的使用及進行限制的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了react中JSX的注意點，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
React實現(xiàn)一個高度自適應(yīng)的虛擬列表
這篇文章主要介紹了React如何實現(xiàn)一個高度自適應(yīng)的虛擬列表，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
使用React?Redux實現(xiàn)React組件之間的數(shù)據(jù)共享
在復(fù)雜的React應(yīng)用中,組件之間的數(shù)據(jù)共享是必不可少的,為了解決這個問題,可以使用React?Redux來管理應(yīng)用的狀態(tài),并實現(xiàn)組件之間的數(shù)據(jù)共享,在本文中,我們將介紹如何使用React?Redux實現(xiàn)Count和Person組件之間的數(shù)據(jù)共享,需要的朋友可以參考下2024-03-03
react-router?v6實現(xiàn)權(quán)限管理+自動替換頁面標(biāo)題的案例
這篇文章主要介紹了react-router?v6實現(xiàn)權(quán)限管理+自動替換頁面標(biāo)題,這次項目是有三種權(quán)限，分別是用戶，商家以及管理員，這次寫的權(quán)限管理是高級權(quán)限能訪問低級權(quán)限的所有頁面，但是低級權(quán)限不能訪問高級權(quán)限的頁面，需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了create-react-app項目配置全解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06