快捷導(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: