React Hooks 核心原理与实战
王沛
eBay 中国研发中心资深技术专家
新⼈⾸单¥59.9
1250 人已学习
课程目录
已更新 16 讲 / 共 23 讲
0/2登录后,你可以任选2讲全文学习。
开篇词 (1讲)
开篇词 | 全面拥抱 Hooks,掌握最新 React 开发方式
免费
基础篇 (7讲)
01|认识 React:如何创建你的第一个 React 应用?
02|理解 Hooks:React 为什么要发明 Hooks?
03|内置 Hooks(1):如何保存组件状态和使用生命周期?
04|内置 Hooks(2):为什么要避免重复定义回调函数?
05|进一步认识 Hooks :如何正确理解函数组件的生命周期?
06|自定义Hooks :四个典型的使用场景
07|全局状态管理:如何在函数组件中使用 Redux?
实战篇 (8讲)
08|复杂状态处理:如何保证状态一致性?
答疑解惑01|如何转换应用React Hooks 的思路?
09|异步处理:如何向服务器端发送请求?
10|函数组件设计模式:如何应对复杂条件渲染场景?
11|事件处理:如何创建自定义事件?
12|项目结构:为什么要按领域组织文件夹结构?
13|Form:Hooks 给 Form 处理带来了哪些新变化?
14 | 使用浮动层:如何展示对话框,并给对话框传递参数?
React Hooks 核心原理与实战
15
15
1.0x
00:00/00:00
登录|注册

14 | 使用浮动层:如何展示对话框,并给对话框传递参数?

你好,我是王沛。今天我们来聊聊如何在 React 中处理对话框。
对话框是前端应用中非常常用的一种界面模式,它们通常是应用中的一个独立窗口,用于展示信息或者输入信息。
但是在 React 中,使用对话框其实并不容易,主要原因在于两点:
一方面,对话框需要先在父组件中声明,才能在子组件中控制其是否显示。
比如说我们需要同时在布局的 header 和 sider 上用菜单去控制某个对话框是否显示,那么这个对话框就必须定义在根组件上。
另一方面,给对话框传递参数只能由 props 传入,这意味着所有的状态管理都需要在更高级别的组件上。而实际上呢,这个对话框的参数可能只在子组件中才会维护,这时我们就需要利用自定义事件将参数回传,非常麻烦。

案例导入:处理对话框的误区

为了方便你理解这两点,我给你举一个实际场景的例子,你就能明白为什么说在 React 中,常用的对话框是比较难处理的。比如说我们需要实现下面这个截图演示的功能:
在这个例子中,我们有一个左右布局的页面。左边栏有一个新建用户的按钮,右边是一个用户列表。点击新建用户的按钮,或者点击表格中的编辑按钮,都会显示同一个对话框。这个对话框根据是否传入用户数据作为参数,来决定是新建还是编辑用户。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
该试读文章来自付费专栏《React Hooks 核心原理与实战》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥59.9
立即订阅
登录 后留言

精选留言(2)

  • 何用
    弹出层并不仅限于 Modal, 还有 Drawer 等等。这些弹出层显隐处理逻辑都很相似,因而可以考虑个更通用的命名,比如说叫 Overlay。
    2021-06-26
  • 何用
    单纯用 react 来管理对话框的全局状态,可以使用 Context + useReducer API 来实现,思路大同小异
    2021-06-26
收起评论
2
返回
顶部