react-pop-modal

自定义触发式Modal函数组件(React)

常见的组件库(Antd-Modal)

开发过程中，有些业务场景需要实现modal组件，点击一个按钮然后展开一个modal， modal上面可能会展示一些数据内容，或者有一些数据交互的通道。 Ant Design作为基于React的前端组件库集成好了modal这么一个对话框组件。 但是其首推的使用方式是一种预埋式的调用方法，首先在需要用到modal的页面内写入<Modal/>组件，然后设置stateconst [isModalVisible,setIsModalVoisbile] = useState(false);, 通过isModalVisbile这个state去控制modal的显示，一般会在点击的按钮中设置setIsModalVisible(true) 。

存在的问题

实现模式与业务逻辑不符

正常的业务逻辑应该是当用户点击某个按钮后，创建并显示出一个对话框modal，这个modal里的内容可以自定。而上述的方法则是预先创建好modal，设置好modal里展示的内容，然后把modal隐藏，当用户点击按钮后，把隐藏改变为显示，这与一般的业务逻辑有出入。

同一页面下的多个modal会产生多个state

上述方法通过state控制modal的显示与否，当某个业务场景下，同一页面内有多种modal需要展示，那就需要预埋多种modal，并设置数量与之相对应的state去控制各个modal的显示。

增加不必要的数据获取次数

因为是预埋式的modal，modal里展示的数据我们需要在用户实际点开之前就预先获取好并完成设置。如果用户在本页面不点开modal，那么就会浪费这样一次获取数据的操作。这样的方式无法实现当用户点击按钮后，再去从后端获取数据并展示的业务流程。

无法在Service层中调用

一些业务场景下，我们可能会需要在service层弹出一个modal去获取用户的某些数据以完成后续操作。这种情况下，Service层没有办法预埋modal组件，而且Components中的state也与Service割裂开来，无法简单实现二者之间的关联。

解决方案

除了上述的方式调用modal以外，antd还推出了另一种函数语法糖的方式展开一个modal，如Modal.method() ，但这种方式并不是主流方式，所以有些时候不能完全满足开发者的需求，为此可以自定义一个函数触发式的modal组件。 这种函数式的modal组件，不需要事先进行预埋，只需要在某个按钮的OnClick中调用该modal函数，便能创建并展开一个modal对话框。
例如：

<button onClick={() => {  //设置OnClick方法
    httpclient.getModalData().then((data) => {  //先获取modal需要的数据
        PopModal(config); //调用PopModal函数，并将获取到的data处理成config传入
    })}                      
}></button>  //PopModal为完全受控组件，本身不具备任何数据

基本使用方式

安装

npm i react-pop-modal

引入

import PopModal from "react-pop-modal";

使用

PopModal({
    style:{width:'400px',top:'200px',padding:'10px',borderRadius:'20px'},
    title: <div>react-pop-modal</div>,
    body: <div style={{textAlign:"center",fontSize:"12px",color:"darkgrey",lineHeight:"13px",marginTop:"-10px"}}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh risus, convallis ut enim at, ullamcorper tincidunt lectus.
        Nunc quis tempor orci. Phasellus vehicula at nulla at vestibulum. Quisque auctor dolor quis purus aliquet, elementum lacinia lacus vehicula. 
        Etiam imperdiet sollicitudin urna non luctus. Cras magna diam, tristique sit amet orci ac, lacinia lacinia odio. 
        Vivamus ipsum est, gravida ac luctus et, laoreet vitae mauris. Vestibulum euismod eros felis, sit amet finibus turpis finibus vel. 
        Donec lobortis euismod diam quis ultricies.
    </div>,
    onClose:function (){console.log('close')},
    onOk:function (){console.log('ok')},
    onCancel:function (){console.log('cancel')},
    okButtonStyle:{color:"green"},
    cancelButtonStyle:{color:"orange"},
    closeButton:true,
    maskClose:true,
})

API

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | style | {} | modal默认样式 | modal样式 | | title | html | - | modal标题 | | body | html | - | modal内容 | | onClose | func | - | modal关闭回调函数 | | onOk | func | - | ok按钮回调函数（不设置则隐藏ok按钮） | | onCancel | func | - | cancel按钮回调函数（不设置则隐藏cancel按钮） | | okText | string | 'ok' | ok按钮文本 | | cancelText | string | 'cancel' | cancel按钮文本 | | okButtonStyle | {} | ok按钮默认样式 | ok按钮样式 | | cancelButtonStyle | {} | cancel按钮默认样式 | cancel按钮样式 | | closeButton | boolean | false | 是否显示关闭modal按钮 | | closeIcon | html | 关闭按钮默认图标 | 关闭按钮图标 | | maskClose | boolean | false | 点击遮罩层是否关闭modal |