最好用的 6 个 React Tree select 树形组件测评与推荐

2022-06-06 15:49:44 浏览数 (3)

本文完整版:《最好用的 6 个 React Tree select 树形组件测评与推荐》

React 树形选择器(React tree select)组件在搭建 React 的 app 中特别常用,React tree select 除了简单的树形结构外,还有非常多样的功能来配合不同场景的使用。比如搜索过滤,前端添加删除树枝,前端编辑修改子树名,拖拽排序,对用户操作事件记录等。本文记录了我自己使用多年最好用的 6 款 React tree select 组件,每一款都经过我实际测试,推荐给大家。

kalacloud-tree-selectkalacloud-tree-select

接下来介绍 6 款我自己常用的 React tree select第三方组件,它们各有特色,希望能帮你找到合适你的选择器

  • React Sortable Tree - 全功能,树状单选多选、可拖拽、过滤搜索、多种主题可选
  • React Treebeard - 纯树形选择器、轻盈趁手、有过滤搜索功能
  • RC Tree - 资源管理器树状型选择器、可拖拽编辑、动态生成、icon 可换
  • React Animated Tree - 有漂亮的动效的基础款树形选择器,没有多余功能
  • React Dropdown Tree Select - 树形下拉菜单勾选选择器,是树形 checkbox 下拉选择器的合集组件
  • React Checkbox Tree - 带有 checkbox 的树状组件、有过滤搜索功能

1.React Sortable Tree - 全功能,树状单选多选、可拖拽、过滤搜索、多种主题可选

react-sortable-treereact-sortable-tree
react-sortable-tree主题react-sortable-tree主题理器、树状全节点拖动、notion 型的块拖动等主题。
  • 没有依赖
  • 单选、多选
  • 鼠标拖拽子集到新合集
  • 前端模糊搜索过滤
  • 多种样式主题和选

2.React Treebeard - 纯树形选择器、轻盈趁手、有过滤搜索功能

react-treebeardreact-treebeard

react-treebeard 简洁的树形 React 组件。虽然 UI 简单,但整体轻盈,功能主要集中在树状结构及搜索上。三角按钮展开树形结构,平滑的动态效果。内置搜索功能,可快速过滤搜索,效率极快。

3.RC Tree - 资源管理器树状型选择器、可拖拽编辑、动态生成、icon 可换

rc-treerc-tree

rc-tree 是一套 Win 资源管理器形的树状选择器 React 组件,用户可以在前端拖拽各个节点到新集合中。更棒的是这套树状组件支持动态加载,可在用户展开树结构时,进行动态加载。

4.React Animated Tree - 有漂亮的动效的基础款树形选择器,没有多余功能

react-animated-treereact-animated-tree

react-animated-tree 是一个最简单形式的 React 树状组件。这套组件有流畅漂亮的动画效果,展开、关闭组件时可见。除此之外,没有任何其他多余的功能,它只有多层树状结构,简单的开合以及点击选择。针对仅需要树状选择组件的使用场景。

5.React Dropdown Tree Select - 树形下拉菜单勾选选择器,是树形 checkbox 下拉选择器的合集组件

react-dropdown-tree-selectreact-dropdown-tree-select

react-dropdown-tree-select 可真是厉害了,是树形选择器 下拉菜单 checkbox 的合集版,不仅前端可以搜索过滤,还可以快速通过树结构批量选择。

6.React Checkbox Tree - 带有 checkbox 的树状组件、有过滤搜索功能

react-checkbox-treereact-checkbox-tree

react-checkbox-tree 顾名思义,它是带有 checkbox 的树状选择器。适合用在勾选需要操作的目录等应用场景中使用。

React 树形选择器总结

本文推荐了我自己使用多年的 6 款最好用的 React Tree select 树形选择器,这其中一定有一款适合你。

0 人点赞