React使用api的方式封装弹窗的示例代码
作者：one_day
在现代开发中的弹窗样式,经常会是底部一个叉号样式的弹窗,但是目前组件库中并无类似弹窗组件,本文小编给大家介绍了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封装弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！