这是我参与「第五届青训营」伴学笔记创作活动的第 13 天，让我们开始着手制作一个 treeSelect 组件，今天先来做一下准备工作，了解这组件是干嘛的，需要我们实现哪些功能。

treeSelect 组件

分析需要实现的功能

treeSelect 组件是一个下拉选择框，它可以展开/收起树形结构并选择其中的项，常用于选择具有层级关系的数据。在编写 treeSelect 组件前，我们需要明确需要实现的功能，根据参考Ant Design的 treeSelect 组件，我们可以总结下面几点功能，包括但不限于：

• 展开/收起树形结构
• 选择/取消选择节点
• 标记已选择的节点
• 在上方收索框中显示选择的节点
• 搜索节点

需要定义的接口

在编写组件之前，我们可以想一想定义组件需要的的接口，。尽可能地方便组件的使用者进行使用。对于 treeSelect 组件，根据我们对于功能地调查，先粗略的认为需要定义的接口包括但不限于：

• 数据源：提供树形结构的数据源
• 默认展开项
• 默认选中项
• 是否默认打开选择菜单
• 搜索框：提供搜索功能
• 搜索框占位符
• 搜索框宽高
• 选项是否可选
• 是否显示折叠箭头
• 等等

简单示例：

interface TreeSelectProps<T> {
  data: Array<TreeNode<T>>;
  isSingle?: boolean;
  checkable?: boolean;
  expandable?: boolean;
  checkboxType?: selectType;
  inputWidth?: string;
  inputHeight?: string;
  displaySelect?: boolean;
  placeholder?: string;
  onSelect?: (selected: Array<TreeNode<T>>) => void;
  onExpand?: (expanded: Set<T>) => void;
}

应当实现的函数

对于 treeSelect 组件，需要实现的函数包括但不限于：

• 渲染树形结构：将数据源渲染成树形结构
• 展开/收起节点：处理节点的展开/收起状态
• 选择/取消选择节点：处理节点的选择/取消选择状态
• 获取已选择节点列表：根据选择的节点，获取已选择的节点列表
• 搜索功能：根据输入的关键字，过滤出符合条件的节点

明天来开始正式地代码编写。