如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 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 放在第一个推荐,因为它涵盖了大多数你需要的功能,单选多选,鼠标拖拽子集到新合集,前端模糊搜索,你需要的功能它全有。
- 没有依赖
- 单选、多选
- 鼠标拖拽子集到新合集
- 前端模糊搜索过滤
- 多种样式主题和选
扩展阅读:《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 太麻烦?
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 树形选择器,这其中一定有一款适合你。这些第三方组件已经帮我们节省大量开发时间,如果还想更进一步,推荐使用卡拉云, 卡拉云内置树形选择器 和过滤搜索功能,无需懂任何前端,仅需拖拽即可快速生成。
下面是用卡拉云搭建的数据库 CURD 后台管理系统,只需拖拽组件,即可在10分钟内完成搭建。
可直接分享给同事一起使用:https://my.kalacloud.com/apps/8z9z3yf9fy/published
卡拉云是新一代低代码开发平台,与 React 这类框架相比,卡拉云无需配置开发环境,直接注册即可开始搭建。开发者无需处理任何前端问题,简单拖拽即可生成图表、表格、表单、富文本等功能组件,一键接入数据库及 API,快速完成企业内部工具搭建,还可以分享给团队成员共享使用,数周的开发时间,缩短至 1 小时。
扩展阅读: