V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
revalue
V2EX  ›  React

哪有一个好用的控制 modal 组件的 hooks?

  •  
  •   revalue · 2020-05-27 18:52:11 +08:00 · 2385 次点击
    这是一个创建于 1401 天前的主题,其中的信息可能已经有所发展或是发生改变。
    还没有遇到一个好用的控制 modal 组件的 hooks 。比如 antd 提供了 modal 组件,我要实现的组件的原理,就是只需要控制它 visible 属性是显示和隐藏。

    所以我就封装了一个 hooks 用来控制 modal 组件的显示和隐藏。又遇到经典的问题,modal 嵌套显示怎么实现?如何控制 modal 之间的层叠次序?

    照这种思路大体上就是这个 hooks 用一个栈来表示层叠等级(其实就是一个状态),App 最外层包一个 provider 组件提供 state 。

    有现成的 hooks 可以参考一下怎么设计的吗?
    10 条回复    2020-05-28 22:22:42 +08:00
    onfuns
        1
    onfuns  
       2020-05-27 20:28:37 +08:00
    层叠关系用一个自定义类样式实现不了?
    ericls
        2
    ericls  
       2020-05-27 20:43:22 +08:00 via iPhone
    reach
    darrenfang
        3
    darrenfang  
       2020-05-27 21:00:32 +08:00
    我写了一个基于 Material UI 的 dialog 组件:

    https://github.com/darrenfang/use-material-ui-dialog

    点击确定按钮时会自动关闭 dialog,所以只能显示一个 dialog,如果要显示多个 dailog 就需要改下按钮点击事件的代码了。
    revalue
        4
    revalue  
    OP
       2020-05-27 21:03:31 +08:00
    @darrenfang 差不多是这个意思了。比如 Material UI 的 dialog 组件,我要控制它显示隐藏。在此基础上可以从一个 dialog 里打开另外一个 dialog
    darrenfang
        5
    darrenfang  
       2020-05-27 21:08:57 +08:00 via iPhone
    @revalue 我的代码里面 state 里面只保存了一个 open 变量,如果是多个 dialog 那就需要把 dialog 和它的状态关联起来存入 state 。
    revalue
        6
    revalue  
    OP
       2020-05-27 21:12:06 +08:00
    @darrenfang 还有个问题,你这是函数呼出对话框。基本上很多人思路也是这样。这样的话,里面的那个 dialog 没法用 jsx 表示

    如果是游戏的 dialog,层级管理比这个复杂很多。暂且不讨论这个条件下的。
    revalue
        7
    revalue  
    OP
       2020-05-27 21:13:07 +08:00
    @onfuns 想找个轮子上来就用。或者抄作业一下,自己搞没有什么想法
    darrenfang
        8
    darrenfang  
       2020-05-27 21:18:23 +08:00 via iPhone
    @revalue 对话框参数里面提供了一个 element 属性,可以设置为 jsx 对象。
    OSF2E
        9
    OSF2E  
       2020-05-28 13:50:05 +08:00
    有浏览器兼容性要求吗?

    没有的话,推荐使用 CSS-Grid-Layout,所有层可以同时挂载在容器组件上,通过设置 zIndex 属性控制层叠状态,通过 opacity/transform/visibility/display 等属性来控制各层的视觉可见性,而不用频繁修改元素树结构,同时方便添加 transition 或者 animiation 动效。

    有兼容性要求,通过 CSS-Block-Layout 外加 position 等属性,降级实现。
    revalue
        10
    revalue  
    OP
       2020-05-28 22:22:42 +08:00
    @OSF2E 我想依赖第三方 UI 库实现,这样整个 UI 样式统一。如果你改人家的 css,尤其是定位的,很容易出问题。也许是一个办法

    这里面其实就是一个逻辑的控制,我想问下这种逻辑的控制有没有封装成 hooks 的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3180 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:25 · PVG 20:25 · LAX 05:25 · JFK 08:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.