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

[revalue]

还没有遇到一个好用的控制 modal 组件的 hooks 。比如 antd 提供了 modal 组件，我要实现的组件的原理，就是只需要控制它 visible 属性是显示和隐藏。

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

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

有现成的 hooks 可以参考一下怎么设计的吗？

[onfuns]

层叠关系用一个自定义类样式实现不了？

[ericls]

reach

[darrenfang]

我写了一个基于 Material UI 的 dialog 组件：

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

点击确定按钮时会自动关闭 dialog，所以只能显示一个 dialog，如果要显示多个 dailog 就需要改下按钮点击事件的代码了。

[revalue]

@darrenfang 差不多是这个意思了。比如 Material UI 的 dialog 组件，我要控制它显示隐藏。在此基础上可以从一个 dialog 里打开另外一个 dialog

[darrenfang]

@revalue 我的代码里面 state 里面只保存了一个 open 变量，如果是多个 dialog 那就需要把 dialog 和它的状态关联起来存入 state 。

[revalue]

@darrenfang 还有个问题，你这是函数呼出对话框。基本上很多人思路也是这样。这样的话，里面的那个 dialog 没法用 jsx 表示

如果是游戏的 dialog，层级管理比这个复杂很多。暂且不讨论这个条件下的。

[revalue]

@onfuns 想找个轮子上来就用。或者抄作业一下，自己搞没有什么想法

[darrenfang]

@revalue 对话框参数里面提供了一个 element 属性，可以设置为 jsx 对象。

[OSF2E]

有浏览器兼容性要求吗？

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

有兼容性要求，通过 CSS-Block-Layout 外加 position 等属性，降级实现。

[revalue]

@OSF2E 我想依赖第三方 UI 库实现，这样整个 UI 样式统一。如果你改人家的 css，尤其是定位的，很容易出问题。也许是一个办法

这里面其实就是一个逻辑的控制，我想问下这种逻辑的控制有没有封装成 hooks 的