利用redux 做一个可追溯的移动端的层级弹框

由于之前一直用ant-design很少重复造轮子，但是公司的原本pc的项目需要兼容移动端，ant-design的一些组件在移动端实在是不好用，

比如说Modal组件。

废话不多说，开始吧。

该组件需要满足了以下特性：

1:内容自定义、位置自定义。

2:点击除了此弹窗组件外的任意地方自动关闭这个组件。

3:一个页面内可能有多个组件，根据层级显示多个组件，并总是最后一个层级高亮。

4:弹框页面可追溯。

第一步，先将渲染Modal的组件写好。

import React, { useEffect, useState } from 'react';
const Modal = props=>{

    let {onClose,components,isLast} = props;  //这里只需要三个参数，一个是关闭后的回调(onClose)，一个是自定义的组件内容(components),isLast判断是否是最后一个渲染的组件，我们需要将其高亮。

    useEffect(()=>{
        let oBody = document.body;  
        oBody.className='Mask'  //这里为了图方便，就直接给body加了个遮罩
        document.onclick= ()=>{  
            onClose()
        }
        return ()=>{
            oBody.className=''  //组件卸载后，将遮罩清除
            document.onclick = null;  //一定要记得把这个事件取消掉 这是个好习惯
        }   
    },[onClose])
    return <div className='Mobile-modal' style={{ zIndex:isLast===true?999:isLast}}> 
                <div onClick={e=>{
                    e.nativeEvent.stopImmediatePropagation() //阻止事件冒泡
                }}>
                    {components} //这里将自定义的组件渲染
                </div>
           </div>
}
----------——————————————————————————————————
 //css
.Mobile-modal{
    position:fixed;
    height:100%;
}

接下来第二步，这里我引入了redux，做追溯：

import {createStore} from 'redux';

const reducer = (state=[],action) => { 
    
    let {type,payLoad} =  action;
    
    switch(type){
        case "ADD":
        return [...state,payLoad];
        case "REDUCE":
        return state.filter((i,index)=>index!==payLoad)
        default : 
        return state
    }
    
}

let {dispatch,getState,subscribe} = createStore(reducer);

//这里大概就写完了，接下来就要将redux与渲染modal的函数结合起来。

const DiaLog = props => {

    const [arr,setArr] = useState([])  
     
    useEffect(()=>{
        dispatch({type:'ADD',payLoad:props})  //将modal的配置加入进去
        let unSubscribe = subscribe(()=>setArr(getState())) //同时监听变化，一旦有新的modal配置更改便重新渲染
        return ()=>{
            unSubscribe() //一定要记得取消监听 
        }
    },[])
    
    const close = (index,propsClose) => {
        propsClose() //关闭钩子执行
        dispatch({type:'REDUCE',payLoad:index}) //同时将modal配置删除
    }

    return arr.map((i,index)=><Modal {...i} onClose={()=>close(index,i.onClose)}  //将所有配置渲染进去
    isLase={index===arr.length=1?true:index} key={key}/>)}
    // isLase={index===arr.length=1?true:index}  除了最后一个为true外，其余的都按照先后顺序显示层级
    export const createDialog = props =>{ dispatch({type:'ADD',payLoad:props})} //这里暴露一个可以直接执行Modal的函数 

完毕。 给大家看看效果吧。