• 当前位置
  • 首页
  • IT技术
  • 文章正文

React_React项目中hook实现展示对话框功能

  • 作者:自动秒收录
  • IT技术
  • 发布时间:2022-05-12 13:40:37
  • 热度:

目录

React中使用对话框并不容易,主要因为:

  1. 对话框需要在父组件中声明,才能在子组件中控制其是否显示
  2. 给对话框传递参数只能由props传入,这意味着所有状态管理都必须在更高阶的组件中。而实际上这个对话框的参数只在子组件中才会维护。这时就需要我们使用自定义事件将参数传回

这些问题的本质就是:如何用一个统一的方式去管理对话框,从而让对话框相关的业务逻辑更加模块化,以及和其他业务逻辑进行解耦。

下面的方式只是经验总结,并不是唯一或者最佳实现:

思路:使用全局状态管理所有对话框

对话框本质上是独立于其他界面的一个窗口,用于完成一个独立的功能。

所以,定义一个对话框,定位等价于定义一个具有唯一URL路径的页面。只是前者由弹出层实现,后者是页面的切换。

对话框UI弹出过程和页面URL的切换非常类似,那么我们就可以给每一个对话框定义一个全局唯一的ID,然后通过这个ID去显示或者隐藏一个对话框,并且给它传递参数。

尝试设计一个API去做对话框的全局管理

假设我们实现的对话框为NiceModal,那么我们的目标是如下去使用:

?

可以看到,如果有这样的API,那么无论在哪个层级的组件,只要知道某个Modal的ID,那么就都可以统一使用这些对话框,而不再需要考虑该在哪个层级的组件去定义了。

实现:创建NiceModal组件和相关API

创建一个处理所有对话框的action creator 和 reducer

? ?

这段代码的主要思路就是通过Redux的store去存储每个对话框状态和参数。在这里设计了两个action,分别显示和隐藏对话框。

特别注意的是,这里加入了hiding这样的一个状态,用来处理对话框关闭过程动画。

根据使用顺序,首先实现 createNiceModal,

使用容器模式,在对话框不可见时直接返回null,从而不渲染任何内容,

确保即使页面上定义了100个对话框,也不会影响性能。

?

实现useNiceModal,根据id,封装一些逻辑。

让Redux的action使用起来更方便,在其内部封装对store的操作,从而实现对话框状态管理的逻辑重用。

?

这样,我们就实现了一个NiceModal这样的全局对话管理框架。

这样使用:

?

处理对话框的返回值

如果说对话框和页面这两种UI模式基本上是一致的,都是独立窗口完成独立逻辑。但是在用户交互上,有一定的差别:

基于上面的NiceModal实现逻辑,现在考虑如何让调用者获得返回值。

我们可以把用户在对话框中的操作看成一个异步操作逻辑,那么用户在完成对话框中内容的操作后,就认为异步操作逻辑完成了。因此我们可以利用Promise来完成这样的逻辑。

那么,我们要实现的API如下:

?

事实上,要实现这样一个机制并不困难,就是在 useNiceModal 这个 Hook 的实现中提供一个 modal.resolve 这样的方法,能够去 resolve modal.show 返回的 Promise。

代码的核心思路就是将show 和 resolve 两个函数通过 Promise 联系起来。因此两个函数调用位置不一样,所以我们使用一个局部的临时变量,来存放resolve回调函数。

?

总结

到此这篇关于React项目中hook实现展示对话框功能的文章就介绍到这了,更多相关Reacthook展示对话框内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

您可能感兴趣的文章:

标签: react对话框组件react

上一篇:pythonpython根据照片获取地理位置及泄露防...
下一篇:C语言C语言实现弹跳小球动画...


发布评论