这是一个创建于 2028 天前的主题，其中的信息可能已经有所发展是发生改变。
还没有遇到一个好用的控制 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