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

2023-11-09

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

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

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

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

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

  • 没有依赖
  • 单选、多选
  • 鼠标拖拽子集到新合集
  • 前端模糊搜索过滤
  • 多种样式主题和选

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

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

react-treebeard

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

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

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

rc-tree

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

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

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

react-animated-tree

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

调试 tree select 太麻烦?

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

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

react-dropdown-tree-select

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

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

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

react-checkbox-tree

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

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

React 树形选择器总结

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

kalacloud-tree-select

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

卡拉云企业内部工具

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

扩展阅读:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 为什么 iife 在一个简单的例子中不起作用?

    我不明白为什么函数表达式调用不起作用并抛出错误 你能给我解释一下吗 var a function x alert x function a 1 谢谢大家 任务比我想象的要容易得多 这是因为 JS 将 IIFE 解析为函数的参数调用 这样做时
  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit
  • IE从哪个版本开始支持Object.create(null)?

    您可以通过多种方式在 JavaScript 中创建对象 creates an object which makes the Object prototype of data var data1 new Object Object liter
  • 如何在故事书中注入窗口变量?

    我想添加一个 React 组件 称为ApplicationForm to a 故事书 https github com storybooks storybook 故事书是这样写的 import configureStore from sto
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • React onClick 事件仅在渲染组件时触发

    动态渲染组件的 onClick 函数应通过 useState 设置所选日期 imgs 上的 onClicks 完全按照您的预期工作 没有任何问题 即使只是在其位置放置一个带有 onClick 属性的 div 也是行不通的 当组件渲染时 on
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • className 属性是否承担 Reactjs 中 id 属性的角色?

    由于 id 属性在 Reactjs 组件中很少使用 因为 id 属性意味着组件不会被重用 那么是否使用 className 属性来代替 id 呢 如果是这样的话 那么 Reactjs 中相当于 HTML 中的 class 属性的是什么 cl
  • 如何渲染变量(或 prop)内部的 jsx/html?

    const Footer gt let a b Hey b return div Some bold text a div 这只会呈现为Some bold text b Hey b 如何将粗体文本渲染为粗体 变量内容是我自己的 所以我不必担
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • 四种IO模型

    四种IO模型 目录 一 什么是IO 二 阻塞IO 三 非阻塞IO 四 信号驱动IO 五 异步IO 目录 一 什么是IO 对于IO的简单理解 我们首先通过两个数据之间的交互过程来理解什么是IO 向上面这样数据从对应的发送缓冲区发送到对应的接受
  • 视频中的I帧、B帧、P帧

    视频文件都是一帧一帧存储的 为了使文件的大小减小 通常会对文件进行压缩 mpeg4 MP4 文件中的每一帧开始都是固定的 00 00 01 b6 那么在接下来的每一帧分别是什么帧呢 I帧 B帧 P帧 一般在这固定帧的后面2bit就是标志是什
  • 【山河送书第十一期】:朋友圈大佬都去读研了,这份备考书单我码住了,考研书籍五本!!

    朋友圈大佬都去读研了 这份备考书单我码住了 数据结构与算法分析 计算机网络 自顶向下方法 现代操作系统 深入理解计算机系统 概率论基础教程 原书第10版 线性代数 原书第10版 线性代数及其应用 重磅推荐 参与方式 往期赠书回顾 八九月的朋
  • 【翻译】torch.device的使用举例

    参考链接 class torch device 原文及翻译 torch device torch device栏目 class torch device torch device 类型 A torch device is an object
  • 我们为什么选择CentOS

    服务器操作系统大多采用Unix和Linux操作系统 而Linux发行版本系统中 多使用CentOS Redhat Ubuntu Gentoo Debian 而这些发行版本可以大体分为两类 一类是商业公司维护的发行版本 一类是社区组织维护的发
  • Spark Shuffle 中 JVM 内存使用及配置内幕详情

    引言 Spark 从1 6 x 开始对 JVM 的内存使用作出了一种全新的改变 Spark 1 6 x 以前是基于静态固定的JVM内存使用架构和运行机制 如果你不知道 Spark 到底对 JVM 是怎么使用 你怎么可以很有信心地或者是完全确
  • 面试官的技术面试技巧与步骤

    面试官进行技术面试的常用技巧与步骤 面试需求 解读人员需求与岗位说明 了解岗位需求和工作内容 明确岗位对人员的知识技能 工作经验和基本素质要求 面前准备 分析应聘者简历 判断人员需求 岗位说明与应聘人员的匹配度 发现需进一步确认的信息 分析
  • 基于产品的RFM模型的k-means聚类分析

    首先我们可以看看数据集的数据形态 导入rfm数据 查看数据的统计学参数 df pd read csv rfm csv df describe 在实施Kmeans聚类之前 我们必须检查这些关键k means假设 变量对称分布 不倾斜 具有相同
  • Ubuntu安装Vmware tools

    点击vmware右上角虚拟机的下拉菜单中点击 安装 VMware Tools 然后在桌面上会有一个压缩包 右击打开当前文件夹 重命名这个压缩包为vmwaretools tar gz 在当前文件夹中打开terminal cp vmwareto
  • 机器学习算法(二十三):DTW(Dynamic Time Warping,动态时间调整)

    目录 1 DTW 动态时间调整 2 算法的实现 3 例子 4 python实现 5 DTW的加速算法FastDTW 5 1 标准DTW算法 5 2 DTW常用加速手段 5 3 FastDTW 1 DTW 动态时间调整 动态时间调整算法是大多
  • java pv uv_前端数据收集(pv/uv)

    所谓web 即使你我素未谋面 便知志趣相投 足不出户 亦知世界大 01 什么是PV UV 网站流量分析 是指在获得网站访问量基本数据的情况下对有关数据进行统计 分析 从中发现用户访问网站的规律 并将这些规律与网络营销策略等相结合 从而发现目
  • Cadence Allegro(8):生成网络报表(Netlist)

    Cadence Allegro 8 生成网络报表 Netlist 前提摘要 PCB设计软件版本 原理图设计 Pad Designer 16 6 PCB设计 PCB Editor 16 6 个人说明 限于时间紧迫以及作者水平有限 本文错误 疏
  • selenium chrome java 无头模式使用cdp设置navigator.permission

    Chrome Devtools Protocol 前提 chromium无头模式下和gui模式是不同的 userData无法指定 也无法通过模拟点击alert授权 或者进入chrome settings 通过selenium控制授权 因为无
  • 奶牛碑文。

    include
  • 八大数据结构

    八大数据结构 数据结构分类 1 数组 2 栈 3 队列 4 链表 5 树 6 散列表 7 堆 8 图 1 数组 数组是可以再内存中连续存储多个元素的结构 在内存中的分配也是连续的 数组中的元素通过数组下标进行访问 数组下标从0开始 例如下面
  • ORACLE 生成唯一id

    1 创建一个序列 create sequence id 序列名称 increment by 1 以1递增 start with 1 从1开始 maxvalue 999999999 最大值 2 创建函数调用上边创建的序列 CREATE FUN
  • PyCharm 使用教程:PyCharm常用技巧指南,轻松学会

    在 PyCharm 中 打开已有的项目有 3 种方式 欢迎界面中选择open 菜单栏中选择 File gt open 打开远程 Git 的项目 在 PyCharm 中 打开已有的项目可以在第一次打开的欢迎界面中选择open来打开你电脑中已经
  • 【‘XXX‘ is declared but its value is never read.】

    遇到问题了 引入一个弹窗组件 已经import了 也在template中写了弹窗组件 但是弹窗就是不出来 1 看看报错信息 没啥报错 2 看看代码 import中的代码暗淡了 鼠标移入出现上面的报错 突然想起来没有在component中写入
  • breach靶场练习详细全过程

    补充 桥接 nat host only三种网络模式的区别 模式 特点 场景 bridge桥接模式 特点 虚拟机使用物理机的网卡 不用虚拟网卡 占用一个ip 需要配置ip以后才可以访问互联网 场景 虚拟机需要连接实体设备的时候 nat网络地址
  • 最好用的 6 个 React Tree select 树形组件测评与推荐

    本文完整版 最好用的 6 个 React Tree select 树形组件测评与推荐 React Tree select 树形组件 1 React Sortable Tree 全功能 树状单选多选 可拖拽 过滤搜索 多种主题可选 2 Rea