outaozhen 9182431eb4 feat: 大司空2.0个人版关联联系人、移除联系人、升级产品 4 سال پیش
..
src 9b0d809cb3 feat: 1 4 سال پیش
README.md f56d834a02 feat: 111 4 سال پیش
index.tsx 9182431eb4 feat: 大司空2.0个人版关联联系人、移除联系人、升级产品 4 سال پیش

README.md

ModalStore 用于集中管理抽屉以及弹窗

使用方法:

  1. 在 modalMap 中引入对应的 Modal/Drawer 组件,key 格式: 弹窗(M_ADD_CLIENT)、抽屉(D_CLIENT_DETAIL), 该组件默认接收 visible、onCancel(弹窗)/onClose(抽屉)。
  2. destroyOnClose 控制弹窗/抽屉是否在关闭后销毁掉组件。

封装原因:

  1. cld2 中存在大量需要共用的弹窗以及弹窗,如果每个调用的地方都要重复嵌套一次,且逻辑基本一样,会造成业务代码臃肿、不健康,长期下去技术债务也无法弥补。
  2. 由于第一次封装使用了单例模式,所有抽屉和弹窗各共用了一个实例导致了后期耗费比较大的成本去适配 Modal 和 Drawer 的层级(zIndex)兼容且最终效果来看也未能满足一开始要实现的效果。
  3. 由 React.createContext 创建上下文中使用堆栈管理弹窗,即可实现无限嵌套且层级叠加不冲突的弹窗/抽屉。