React组件库封装初探--Modal

时间：2023-04-05 01:06:20 HTML5

Madal组件实现的基本介绍和antd实现的modal组件类似。一、基本结构分析：modal-mask掩码层modal-warpcontentpackaginglayermodal主要内容层，包括：title,content,footer,close-btn固定定位布局，全屏覆盖显示，所以内容可以自定义实现功能目标：两个调用方法somecontent,Modal.confirm({...props})覆盖层，footer和close——是否显示btn，点击关闭其他必要的功能结构布局征服基本布局内容层高度可自定义//右上角关闭按钮+

}//主要内容

//titletitle

{title}

//body用户输入的内容{children}

//页脚底部按钮

{okText}{cancelText}

遮罩层全屏覆盖位置：固定定位全屏实现top:0;右：0；底部：0；左：0；z-指数：1000；contentlayerposition：固定定位（modal-warplayer）warp层的布局尺寸考虑全屏：如果warp层实现了全屏，由于与mask层是同级组件，warp层位于mask之上layer,而点击遮罩层的功能后面可以关闭,很容易因为被全屏warp层遮挡导致点击失败(可以考虑使用事件委托给第一个父组件绑定点击事件),通过判断去掉modal层的点击,虽然点击的还是warp层);sizefollowsthemodallayer:而warplayer的size设置为刚好是它的contentmodal，这样就不会覆盖所有的masklayer，但是后面在inputsetting中是否显示masklayer的功能会影响功能（因为warp层不是全屏的，如果mask设置不显示，会导致用户操作下面的主要内容），mask的可见性可以认为是通过visibility来控制的：隐。基本函数逻辑实现基本对外接口（函数式）constModal=({visible=false,style,width=520,zIndex=1000,centered=false,title='title',footer,wrapClassName='',okText='OK',okType='primary',cancelText='Cancel',cancelType='default',closable=true,onOk=()=>{},onCancel=()=>{},mask=true,maskClosable=true,children='Basicbody'})=>{return(visible?ReactDOM.createPortal(

....

,document.querySelector('body')):null)}组件采用函数无状态编程，Modal的外观由外部控制，内部不控制；组件使用ReactDOM.createPortal(child,container)安装到body基本使用形式state={visible:false}showModal=()=>{this.setState({visible:true})}onCancel=()=>{console.log('cancel')this.setState({visible:false})}onOk=()=>{控制台。标识k')this.setState({visible:false})}render(){const{visible}=this.state;return(

简单的基本用法：modal

modal提示内容

)}}效果升级篇Modal.method()如何实现antd中类似modal.method的方法调用弹窗（并返回包含{update的引用,destroy}控制调用后的弹窗）：Modal.info({...})Modal.success({...})Modal.error({...})Modal.warning({...})Modal.confirm({...})method()是Modal的方法，也就是先给组件Modal添加对应的方法返回一个对象；在method(props)方法中将其方法参数作为组件Modal的props传递，render(Modal)；需要返回一个包含{update,destroy}的对象基本代码如下：['confirm','info','success','error','warning'].forEach(item=>{//eslint-disable-next-linereact/no-multi-compModal[item]=({...props})=>{letdiv=文档.createElement('div');让currentConfig=Object.assign({},props);文档.body.appendChild(div);//使用高阶组件以Method()调用的形式消除不可配置的props和默认值constFunModal=HOCModal(Modal);//关闭constdestroy=()=>{constunmountResult=ReactDOM.unmountComponentAtNode(div);如果(unmountResult&&div.parentNode){div.parentNode.removeChild(div);}}constrender=(config)=>{//调用的方法名传入的name，用于区分使用不同的footer和IconReactDOM.render(,div);}//更新constupdate=(newConfig)=>{currentConfig=Object.assign({},currentConfig,newConfig);渲染（当前配置）；}渲染（当前配置）；返回{销毁：销毁，更新：更新}}}）；因为Modal.method()调用形式可以使用配置props中的配置项和默认值与不同；例如，页脚不能在Modal.confirm({})中配置；默认情况下，Modal.info({})中的页脚底部应该是一个按钮，默认值是我所知道的；再比如Modal.method()不需要传入visible，但是需要传入形式；又如Modal.method()中没有children，content作为content的传递，需要适配；所以这里我们考虑使用一个高阶组件HocModal来部分移除和修改传递给Modal的props的默认值constHOCModal=(Component)=>{//移除visible,footer,closable使其不可配置，给permanent默认值返回({visible,footer,closable,okText='know',okType='primary',onOk=()=>{},onCancel=()=>{},maskClosable=false,content='Basicbody',name,destroy,...props})=>{//修改onOk方法传入关闭Modal方法destroy();constonOk_1=()=>{onOk();破坏（）;}//修改onCancel方法传入关闭Modal方法destroy();constonCancel_1=()=>{onCancel();破坏（）;}//Modal底部的footer固定使用this作为默认值，不能自定义footer，如果调用confirm返回undefined遵循Modal的默认配置，其他的只显示一个OK按钮//eslint-disable-next-linereact/no-multi-compconstFooter=()=>(name=='confirm'?undefined:<按钮onClick={onOk_1}type={okType}>{okText})return()}}使用测试constModalConfirm=()=>{constonInfo=()=>{Modal.info({title:'Info',content:(

一些消息...一些消息...

),onOk(){}});}constshowDeleteConfirm=()=>{constmodal=Modal.confirm({title:'确定要删除此项吗？',content:'部分删除提示内容',okText:'删除',okType:'danger',cancelText:'取消',onOk(){console.log('确定');},onCancel(){console.log('取消');}});控制台日志（模态）；}return(

Deleteinfo

)}结果显示其他为显示和隐藏优化的动画过渡；componentsReservation，这里只实现关闭和销毁；优化选择不破坏而是隐藏；支持异步加载和关闭“积步走万里”——持续更新中~喜欢就点赞关注吧！往期经典好文：你所不知道的CORS跨域资源共享性能优化---Webpack构建速度优化团队协作必备Git操作使用pm2部署node生产环境下期考虑Carousel走马灯打包

上一篇：前端常用知识积累

下一篇：JS原型链的理解

React组件库封装初探--Modal相关文章