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

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

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

如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。

接下来介绍 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-tree 放在第一个推荐，因为它涵盖了大多数你需要的功能，单选多选，鼠标拖拽子集到新合集，前端模糊搜索，你需要的功能它全有。

它还有多种主题可供选择，比如，win 文件管理器、树状全节点拖动、notion 型的块拖动等主题。

• 没有依赖

• 单选、多选

• 鼠标拖拽子集到新合集

• 前端模糊搜索过滤

• 多种样式主题和选

扩展阅读：《7 款最棒的开源 React 移动端 UI 组件库和模版框架》

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

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

扩展阅读：《最好的 6 个 React Table 组件详细亲测推荐》

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

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

扩展阅读：《最好用的 5 款 React 富文本编辑器》

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

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

调试 tree select 太麻烦？

试试卡拉云，无需懂前端，拖拽即可生成 tree 组件，连接 API 和数据库直接生成后台系统，两个月的工期降低至 1 天

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

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

扩展阅读：《React form 表单验证终极教程》

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

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

扩展阅读：《顶级好用的 React 表单设计生成器，可拖拽生成表单》

React 树形选择器总结

本文推荐了我自己使用多年的 6 款最好用的 React Tree select 树形选择器，这其中一定有一款适合你。这些第三方组件已经帮我们节省大量开发时间，如果还想更进一步，推荐使用卡拉云， 卡拉云内置树形选择器 和过滤搜索功能，无需懂任何前端，仅需拖拽即可快速生成。

卡拉云可帮你快速搭建企业内部工具，下图为使用卡拉云搭建的内部广告投放监测系统，无需懂前端，仅需拖拽组件，10 分钟搞定。你也可以快速搭建一套属于你的后台管理工具。

卡拉云是新一代低代码开发平台，与前端框架 Vue、React 等相比，卡拉云的优势在于不用首先搭建开发环境，直接注册即可开始使用。开发者完全不用处理任何前端问题，只需简单拖拽，即可快速生成所需组件，可一键接入常见数据库及 API，根据引导简单几步打通前后端，数周的开发时间，缩短至 1 小时。立即免费试用卡拉云。

扩展阅读：

• 最好用的 8 款 React Datepicker 时间日期选择器测评推荐
  

• React Router 6 (React路由) 最详细教程
  

• React Draggable 实现拖拽 - 最详细中文教程
  

• 最好的 6 款 React admin 后台管理系统模板和框架