React 使用api的方式封装弹窗

在现代开发中的弹窗样式，经常会是底部一个叉号样式的弹窗，

但是目前组件库中并无类似弹窗组件，所以基于蒙层组件Overlay二次开发，弹窗组件名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>

这样看上去代码结构就会很乱，那怎么办，能不能改成api的方式调用，让代码回归只有基础布局模块，在涉及弹窗的地方在对应的方法里面调用即可

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;