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;

到此这篇关于React使用api的方式封装弹窗的示例代码的文章就介绍到这了,更多相关React api封装弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/3268853yk.htm

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END