这是一个创建于 1627 天前的主题，其中的信息可能已经有所发展或是发生改变。
还没有遇到一个好用的控制 modal 组件的 hooks 。比如 antd 提供了 modal 组件，我要实现的组件的原理，就是只需要控制它 visible 属性是显示和隐藏。
所以我就封装了一个 hooks 用来控制 modal 组件的显示和隐藏。又遇到经典的问题，modal 嵌套显示怎么实现？如何控制 modal 之间的层叠次序？
照这种思路大体上就是这个 hooks 用一个栈来表示层叠等级(其实就是一个状态)，App 最外层包一个 provider 组件提供 state 。
有现成的 hooks 可以参考一下怎么设计的吗？
所以我就封装了一个 hooks 用来控制 modal 组件的显示和隐藏。又遇到经典的问题，modal 嵌套显示怎么实现？如何控制 modal 之间的层叠次序？
照这种思路大体上就是这个 hooks 用一个栈来表示层叠等级(其实就是一个状态)，App 最外层包一个 provider 组件提供 state 。
有现成的 hooks 可以参考一下怎么设计的吗？
 |
1
onfuns 2020-05-27 20:28:37 +08:00
层叠关系用一个自定义类样式实现不了？
|
 |
2
ericls 2020-05-27 20:43:22 +08:00 via iPhone
reach
|
 |
3
darrenfang 2020-05-27 21:00:32 +08:00
我写了一个基于 Material UI 的 dialog 组件：
https://github.com/darrenfang/use-material-ui-dialog 点击确定按钮时会自动关闭 dialog，所以只能显示一个 dialog，如果要显示多个 dailog 就需要改下按钮点击事件的代码了。 |
 |
4
revalue OP @darrenfang 差不多是这个意思了。比如 Material UI 的 dialog 组件，我要控制它显示隐藏。在此基础上可以从一个 dialog 里打开另外一个 dialog
|
|
5
darrenfang 2020-05-27 21:08:57 +08:00 via iPhone
@revalue 我的代码里面 state 里面只保存了一个 open 变量，如果是多个 dialog 那就需要把 dialog 和它的状态关联起来存入 state 。
|
|
6
revalue OP @darrenfang 还有个问题，你这是函数呼出对话框。基本上很多人思路也是这样。这样的话，里面的那个 dialog 没法用 jsx 表示
如果是游戏的 dialog，层级管理比这个复杂很多。暂且不讨论这个条件下的。 |
|
8
darrenfang 2020-05-27 21:18:23 +08:00 via iPhone
@revalue 对话框参数里面提供了一个 element 属性，可以设置为 jsx 对象。
|
 |
9
OSF2E 2020-05-28 13:50:05 +08:00
有浏览器兼容性要求吗？
没有的话，推荐使用 CSS-Grid-Layout，所有层可以同时挂载在容器组件上，通过设置 zIndex 属性控制层叠状态，通过 opacity/transform/visibility/display 等属性来控制各层的视觉可见性，而不用频繁修改元素树结构，同时方便添加 transition 或者 animiation 动效。 有兼容性要求，通过 CSS-Block-Layout 外加 position 等属性，降级实现。 |
|
10
revalue OP @OSF2E 我想依赖第三方 UI 库实现，这样整个 UI 样式统一。如果你改人家的 css，尤其是定位的，很容易出问题。也许是一个办法
这里面其实就是一个逻辑的控制，我想问下这种逻辑的控制有没有封装成 hooks 的 |
Select Language