快捷導航

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

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

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

在現(xiàn)代開發(fā)中的彈窗樣式，經(jīng)常會是底部一個叉號樣式的彈窗，但是目前組件庫中并無類似彈窗組件，所以基于蒙層組件Overlay二次開發(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>

但是假如彈窗組件越來越多，就會像下面這樣

<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)就會很亂，那怎么辦，能不能改成api的方式調(diào)用，讓代碼回歸只有基礎(chǔ)布局模塊，在涉及彈窗的地方在對應(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: