从 Ant Design 中,学一手复杂组件交互的优秀实践

开发 前端
这是一种合理抽离子组件的方式,在复杂页面的交互中非常有用。把局部交互逻辑单独隔离到子组件中去,而不需要在父组件中去维护弹窗组件等逻辑的状态,从而让页面组件的代码保持简洁。

我们在学习的时候遇到的 Demo 经常都是比较简单的,但是一旦到了实践工作中,数据和功能就开始变得复杂了。这个时候许多小伙伴就不知道咋处理了,他可能会把组件写的非常庞大。不利于维护。

我们可以在 antd 中,学习一手最佳实践,如何把复杂的组件转化为简单的组件。

例如我们有这样一个复杂交互需求。这是一个树结构与输入框结合的交互逻辑 Input + Tree。

在 antd 中,这样的交互被封装成为了一个单独的子组件 TreeSelect。他的妙处就在于,当我们使用该组件时,不需要关注内部的复杂逻辑到底是如何处理的。

我们只需要关心的问题有三个,第一,Input 和 Tree 结构需要的初始化数据。

<TreeSelect 
  treeData={treeData}
  defaultValue={}
  placeholder="Please select"
/>

placeholder 表示没有任何选中数据时,Input 中的提示信息。可以在组件内部给一个通用默认值,这样在大多数情况就不需要显示的传入了。

第二,Input 受控属性 value。

<TreeSelect 
  treeData={treeData}
  value={}
/>

第三,当内部有操作变化,并且需要告知外部时,所需要执行的钩子函数 onChange。

<TreeSelect 
  treeData={treeData}
  onChange={}
/>

很多时候,我们并不需要受控属性 value 。这是许多人在使用时可能会不太理解的地方。受控属性的目的是用于在父组件去控制 TreeSelect 的显示。但是其实我们可能只是需要从 onChange 中获取到当前选中的结果,然后将这个结果整合到接口参数中去提交表单。只有当 TreeSelect 中的交互结果,会影响到其他外部组件时,我们才会考虑使用受控组件。

因此,在使用时,我们需要考虑的是,利用 defaultValue 或者 value 去回显组件在初始化时的数据。

然后利用 onChange 获取得到最新的值即可。

这里比较有意思的是,当我们把目标关注到 Input 组件时,发现 Input 组件的核心属性也是这几个 defalutValue/value/onChange。

而 tree 组件的核心属性,也是这几个 defalutValue/value/onChange。

因此,我们可以基于这种思路,去封装复杂业务组件,让其使用起来变得非常简单。

例如,我们有一个配置项名为被选中的学员。在页面上我们使用一个列表来暂时选中结果列表。

在该结果展示列表中,可以删除项。

当需要重新选中时,需要点开一个弹窗,然后弹窗中有一个完整的人员分页列表。

大家可以脑补一下。

我们可以把这一部分统一封装成一个 TreeSelect 那样的组件,命名为 PersonnelSelector,其中包括:展示结果的列表组件、弹窗组件、弹窗中的分页列表组件。

对于内部而言,构成非常的复杂。

但是对于外部而言,他的构成就非常简单,我们只需要通过 value/defaultValue 回显数据,并且通过 onChange 获取操作之后的最新选中值即可。

<PersonnelSelector 
  value={[{}, {}, {}]}
  notallow={}
/>

PersonnelSelector 就是我们封装的业务组件。

// 简化版代码
function PersonnelSelector() {
  const [selected, setSelected] = useState([])
  const [open, setOpen] = useState(false)
  const {list} = usePagination(api)

  return (
    <>
      <Table dataSource={selected} />
      <Modal show={open}>
        <Table dataSource={list} />
      </Modal>
    </>
  )
}

总结

这是一种合理抽离子组件的方式,在复杂页面的交互中非常有用。把局部交互逻辑单独隔离到子组件中去,而不需要在父组件中去维护弹窗组件等逻辑的状态,从而让页面组件的代码保持简洁。

责任编辑:姜华 来源: 这波能反杀
相关推荐

2023-08-24 21:49:54

人工智能高端算法工程师

2010-09-09 15:21:17

丁磊

2013-04-17 10:30:07

GlassGoogle

2019-12-16 14:04:48

MySQL数据库SQL

2019-10-24 15:23:04

SQL优化数据库

2023-11-10 16:08:23

SQL数据库

2020-05-22 08:24:21

SQLMySQL数据库

2020-02-10 13:22:35

编程语言机器学习Python

2023-09-03 18:44:50

AI运营商

2011-06-24 14:48:08

英特尔网卡

2021-12-15 09:51:42

Web开发数据

2019-05-06 11:06:30

PyTorch深度学习框架

2012-05-21 15:34:48

H3C无线路由

2017-07-04 09:49:36

ActivityAndroidLife场景

2015-05-18 15:37:28

2022-06-30 13:56:05

Rating鸿蒙

2024-04-15 12:54:00

ReactVue列表逻辑

2018-08-16 13:46:15

人工智能AI情绪识别

2023-07-16 22:57:38

代码场景业务

2021-07-01 15:17:14

MYSQL存储数据库
点赞
收藏

51CTO技术栈公众号