从零开始构建 UI 库之树形组件

树形数据结构的组件似乎并不是前端组件库所必须的，不过一旦遇到相关需求，比如需要展示一个部门下的职称层级结构，就无可避免需要用到。虽然相关的组件涉及到算法，但不要担心，涉及到的都是最基础很简单的搜索算法。

树形组件的本质

我们的 Tree 组件接受树形数据结构的输入，一个普通的树形数据结构，其中的节点有值 、子节点 ，子节点是一个列表，里面包含了更多的子节点，这就形成了一棵树。Tree 组件的作用就是将这棵树可视化地呈现出来。

算法

Tree 组件涉及到的算法很简单，就是遍历这棵树，将其节点转换成 HTML 元素，然后组合成一个完整的树形结构。

实现

实现 Tree 组件的关键是使用递归，因为树形数据结构本身就是递归的。具体步骤如下：

1. 初始化： 创建一个根元素，用于存放整个树形结构。
2. 递归遍历： 遍历树形数据结构，对于每个节点：
   • 创建一个 HTML 元素，并设置其值。
   • 如果节点有子节点，则递归遍历这些子节点，并将其添加到当前元素中。
3. 返回根元素： 遍历完成后，根元素就包含了整个树形结构，返回即可。

代码示例

以下是 Tree 组件的一个简单实现：

class Tree {
  constructor(data) {
    this.data = data;
    this.children = [];
  }

  render() {
    const element = document.createElement('div');
    element.innerHTML = this.data;

    for (const child of this.children) {
      element.appendChild(child.render());
    }

    return element;
  }
}

使用

要使用 Tree 组件，只需创建一个树形数据结构，并将其作为参数传递给组件即可。

const treeData = {
  value: 'Root',
  children: [
    {
      value: 'Child 1',
      children: [
        {
          value: 'Grandchild 1'
        },
        {
          value: 'Grandchild 2'
        }
      ]
    },
    {
      value: 'Child 2',
      children: [
        {
          value: 'Grandchild 3'
        }
      ]
    }
  ]
};

const tree = new Tree(treeData);
document.body.appendChild(tree.render());

结语

Tree 组件虽然简单，但非常有用。它可以轻松地将树形数据结构可视化，满足各种需求。