快捷導(dǎo)航

React使用api的方式封裝彈窗的示例代碼

更新時(shí)間：2024年09月04日 08:43:50 作者：one_day

在現(xiàn)代開(kāi)發(fā)中的彈窗樣式,經(jīng)常會(huì)是底部一個(gè)叉號(hào)樣式的彈窗,但是目前組件庫(kù)中并無(wú)類似彈窗組件,本文小編給大家介紹了React使用api的方式封裝彈窗的示例,感興趣的小伙伴跟著小編一起來(lái)看看吧

在現(xiàn)代開(kāi)發(fā)中的彈窗樣式，經(jīng)常會(huì)是底部一個(gè)叉號(hào)樣式的彈窗，但是目前組件庫(kù)中并無(wú)類似彈窗組件，所以基于蒙層組件Overlay二次開(kāi)發(fā)，彈窗組件名DialogTest

<Overlay visible={props.show} closeOnOverlayClick={false}>
    <div class="dialog-container">{props.children}</div>
</Overlay>

然后在到需要彈窗的地方引入該彈窗組件

<div>
    <div class="top-part"></div>
    <div class="main-part"></div>
    <div class="bottom-part"></div>
    <DialogTest></DialogTest>
</div>

但是假如彈窗組件越來(lái)越多，就會(huì)像下面這樣

<div>
    <div class="top-part"></div>
    <div class="main-part"></div>
    <div class="bottom-part"></div>
    <DialogTest1></DialogTest>
    <DialogTest2></DialogTest2>
    <DialogTest3></DialogTest3>
    <DialogTest4></DialogTest4>
</div>

這樣看上去代碼結(jié)構(gòu)就會(huì)很亂，那怎么辦，能不能改成api的方式調(diào)用，讓代碼回歸只有基礎(chǔ)布局模塊，在涉及彈窗的地方在對(duì)應(yīng)的方法里面調(diào)用即可

import modelApi from './modelApi.ts'

const showDialog = ()=>{
modelApi.show()
}

<div>
    <div class="top-part"></div>
    <div class="main-part"></div>
    <div class="bottom-part"></div>
</div>

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { Overlay } from "";

// 彈窗組件
const Modal = ({ visible, onClose, children }) => {
  return ReactDOM.createPortal(
    <Overlay visible={visible} onClick={onClose}>
      <div className="modal-content">{children}</div>
    </Overlay>,
    document.body,
  );
};

// API方法封裝
const modalAPI = {
  show: (content) => {
    const div = document.createElement("div");
    document.body.appendChild(div);

    const closeModal = () => {
      ReactDOM.unmountComponentAtNode(div);
      document.body.removeChild(div);
    };

    ReactDOM.render(
      <Modal visible={true} onClose={closeModal}>
        {content}
      </Modal>,
      div,
    );
  },
};

export default modalAPI;

到此這篇關(guān)于React使用api的方式封裝彈窗的示例代碼的文章就介紹到這了,更多相關(guān)React api封裝彈窗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

React Router V4使用指南(精講)
這篇文章主要介紹了React Router V4使用指南(精講)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
React如何使用axios請(qǐng)求數(shù)據(jù)并把數(shù)據(jù)渲染到組件
這篇文章主要介紹了React如何使用axios請(qǐng)求數(shù)據(jù)并把數(shù)據(jù)渲染到組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
react antd checkbox實(shí)現(xiàn)全選、多選功能
目前好像只有table組件有實(shí)現(xiàn)表格數(shù)據(jù)的全選功能,如果說(shuō)對(duì)于list,card,collapse等其他組件來(lái)說(shuō),需要自己結(jié)合checkbox來(lái)手動(dòng)實(shí)現(xiàn)全選功能,這篇文章主要介紹了react antd checkbox實(shí)現(xiàn)全選、多選功能,需要的朋友可以參考下
2024-07-07
react map使用方法實(shí)例詳解
map()方法是在React中常用的數(shù)組處理方法之一,可以用于遍歷數(shù)組、生成組件列表以及進(jìn)行數(shù)據(jù)轉(zhuǎn)換等操作,通過(guò)合理運(yùn)用map()方法,可以更靈活地處理和展示數(shù)據(jù),下面給大家講解react map使用方法,感興趣的朋友一起看看吧
2023-10-10
React?Native?加載H5頁(yè)面的實(shí)現(xiàn)方法
這篇文章主要介紹了React?Native?加載H5頁(yè)面的實(shí)現(xiàn)方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-04-04
react結(jié)合typescript?封裝組件實(shí)例詳解
這篇文章主要為大家介紹了react結(jié)合typescript?封裝組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
手挽手帶你學(xué)React之React-router4.x的使用
這篇文章主要介紹了手挽手帶你學(xué)React之React-router4.x的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
React捕獲并處理異常的方式
這篇文章主要給大家介紹了React優(yōu)雅的捕獲并處理渲染異常方式,文章通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-11-11
antd?3.x?Table組件如何快速實(shí)現(xiàn)虛擬列表詳析
這篇文章主要給大家介紹了關(guān)于antd?3.x?Table組件如何快速實(shí)現(xiàn)虛擬列表的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用antd具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-11-11
react組件中debounce防抖功能失效問(wèn)題解決辦法
在React組件中,如果使用useState管理searchKey,每次輸入變化都會(huì)導(dǎo)致組件重新渲染,從而生成新的debounce函數(shù),導(dǎo)致防抖功能失效,解決方法是使用useRef定義searchKey為非響應(yīng)式數(shù)據(jù),從而維持debounce函數(shù)的穩(wěn)定,確保防抖功能有效,感興趣的朋友跟隨小編一起看看吧
2024-10-10