react+antd 递归实现树状目录

最新推荐文章于 2025-03-28 11:53:55 发布
最新推荐文章于 2025-03-28 11:53:55 发布
阅读量5.4k 收藏 18
点赞数 4
分类专栏： 前端 算法 javascript 框架 文章标签： javascript react Antd 算法 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44809405/article/details/88714908
版权
本文介绍了前端小白如何通过递归处理数据和利用Ant Design的Tree组件，将后台平铺的数组数据转化为树状结构，并实现前端展示。详细讲述了数据格式化、组件格式设计以及在实际操作中遇到的问题和解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

react+antd递归实现树状目录

1.写在前面

作为前端小白的我一直对算法和数据结构浅尝辄止，哝，吃亏了。使用多次递归实现数据格式化后将数据进行树状展示的目的，分享一下我这次挠头的经历~

2.数据

后台传过来的数据大概是这样的

{
   
	"data":[
		{
   
			"id":1,
			"name":"一级节点",
			"parentId":0,
			"isValid":true,
			"canAddChild":true,
			"parent":null,
			"children":[]
		},{
   
			"id":3,
			"name":"二级节点",
			"parentId":1,
			"isValid":true,
			"canAddChild":true,
			"parent":null,
			"children":[
最低0.47元/天 解锁文章
react➕antd【树形列表，右键出现菜单】
xiaohong的博客
05-22 5170
1，列表上右键事件 treeNodeonRightClick，代码中有 2，自定义右键菜单内容 getNodeTreeRightClickMenu，代码中有 3，return下面写入右键菜单内容 {this.getNodeTreeRightClickMenu()} 4，效果图 5，详细代码 import React, { PureComponent } from 'react'...
antd树型选择控件选择父级_react+antd 递归实现树状目录操作
weixin_29699041的博客
02-15 1510
1.写在前面作为前端小白的我一直对算法和数据结构浅尝辄止，哝，吃亏了。使用多次递归实现数据格式化后将数据进行树状展示的目的，分享一下我这次挠头的经历~2.数据后台传过来的数据大概是这样的{"data":[{"id":1,"name":"一级节点","parentId":0,"isValid":true,"canAddChild":true,"parent":null,"children":[]},...
react-antd-treetable:Ant基于Antd二次开发的树状表格组件，支持懒加载，分页，过滤等功能
03-08
欢迎来到react-antd-treetable :waving_hand: 介绍 基于antd表组件封装，比较适合用于展示的信息。 主要扩展的能力： 层级缩进指示线 远程懒加载子例程 子公告分页 子例程筛选 子每秒空提示 这些功能全部通过插件实现，其他的props全部继承自Ant Design的Table组件。 用法 需要依赖antd ， @ant-design/icons npm i react-antd-treetable -S 最简单的用法和antd的表组件完全一致，数据中带有children分割即可： import React from 'react' ; import TreeTable from 'react-antd-treetable' ; const data = [ { name : 'foo' , children : [ { name
用react和electron实现文件树组件（上）
digi2020的博客
11-18 551
创建一个文件夹file-tree-js，进入文件夹，打开终端，输入yarninit-y创建一个javascript项目，这里使用了yarn作为包管理工具，也可以使用nodejs默认安装时自带的npm来创建javascript项目。
用 React + TypeScript + Antd 打造一个动态加载的树形穿梭选择组件
最新发布
weixin_41644392的博客
03-28 1152
通过 React、TypeScript 和 Antd 的 TreeSelect，我们实现了一个支持动态加载、多选切换的树形穿梭选择组件。它不仅满足了复杂业务场景的需求，还保持了代码的可读性和扩展性。如果你在项目中也有类似需求，不妨试试这个组件！复制代码，稍作调整就能跑起来。有什么优化建议或使用心得，欢迎留言交流～
递归算法，通过js生成tree树形菜单
qq_36434345的博客
11-28 1102
var data = [ { id: 1, name: "办公管理", pid: 0 }, { id: 2, name: "请假申请", pid: 1 }, { id: 3, name: "出差申请", pid: 1 }, { id: 4, name: "请假记录", pid: 2 }, { id: 5, name: "系统设置", pid: 0 }, { id: 6, name: "...
dva各文件名目录的解释
babyangeltears的博客
12-15 4434
①components：最基础的组件。这里面存放的只是最基本的UI组件，这些组件接收外部传过来的参数（数据），并将这些数据渲染的到界面。根据传入的参数的不同，界面渲染也不同。 ②container：contatiner负责将数据的组件进行连接，相当于将compontent组件和store里面的数据进行包装，生成一个新的有数据的组件。然后，在router.js配置文件中引用container中的组
React + Antd Menu组件实现菜单树
算云烟
02-24 1493
准备好两个变量，一个用来保存平级菜单列表，一个用来保存遍历后的菜单树。 推荐后端返回平级菜单树，假如菜单比较多，可以直接结合find方法找到菜单，做搜索功能很省事。 const [menuList, setMenuList] = useState([]); const [treeMenuList, setTreeMenuList] = useState([]); 如果后端返回的是平级菜单树，则需要转化成树形结构，注意利用JSON方法进行深度克隆一下，防止影响原有数据 const treeList:
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
react+antd Tree树控件（Demo可以直接运行）实现（递归生成数据）同时支持左边图标自定义也可以加自己的Logo
weixin_43207103的博客
09-06 2570
1 先上完成效果图 2 上代码（粘贴复制可以直接运行） import React, { useState } from 'react' import { Tree } from 'antd'; import { SmileOutlined, WalletOutlined, TabletOutlined } from '@ant-design/icons'; function IsTree(props) { //这是我从数据库得到的树的json数据 let d =
antd树形控件编辑递归处理
weixin_45221036的博客
06-21 1231
antd树形控件编辑递归处理 题目： 请根据下面的数据结构，使用antd的“树形控件”组件，构建一棵树形结构的，**并且支持对每个节点名称进行编辑修改（**编辑方式可以是弹窗编辑，也可以是将节点名称变为input框直接修改）。 要求： 自建React项目，可在本地运行，尽量保持代码风格良好可读。 树形结构数据： [ { title: '0-0', key: '0-0', children: [ { title: '0-0-0', key
React中实现n级树形目录
逆袭的菜鸟X
01-20 1638
需求描述：实现n级属性目录展开，该实现使用react，antd-mobile 实现效果 使用方法 import TreesMenu from "./treeMenu.jsx"; <TreesMenu datas={treesData} onselected={item => { console.log("选择了树形目录的数据："...
React+Ant Design+Tree渲染树形菜单（机构树）
dzqloveyou的博客
12-17 4090
React+Ant Design+Tree渲染树形菜单（机构树） 最近做了两次机构树，觉得这个这个还是很重要的，记录一下以后方便看 1.引用组件： import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; 2.数据（data） this.state={ compoentList:[ { "super_bank_id_list": "0", "children": [
react+antd实现树形菜单展示(后台使用java)
放飞梦想
08-25 3524
1.数据库表设计(我使用的是单表一对多,里面需要有一个pid指向父层级的id) 2.在后台获取数据的时候,使用的实体类为此种形式 public class UserTree { private Integer id; private String name; private Integer pid; //每个实体类对象中都有持有本类对象的集合 priva...
react+antd 使用Tree插件实现账号角色组权限功能
WGTkris的博客
05-24 1207
react+antd 使用Tree插件实现账号角色组权限功能
antd treeselect filterTreeNode 节点搜索
elizebeth6的博客
04-14 6215
我用的版本是 vue3.0 ant 2.2.8 想实现搜索功能只需要 加一个 :filterTreeNode="filterTreeNode" // 搜索 const filterTreeNode = (value, node) => { if (node.props.name.indexOf(value) > -1) { if (node.props.dataRef.children.length !== 0) {
React基本实现递归Tree的方式
qq_42577176的博客
08-19 555
//最顶级的节点信息 import React from 'react' import Tree from './Tree' const treeData=[ { title: '父节点1', key: '0-0', children: [ { title: '子节点1', key: '0-0-1', children: [ { titl
【react实现递归编辑树】
小蓝人的博客
12-26 609
【代码】【react实现递归编辑树】
React 组件封装之 Tree 树形控件
杏子
10-28 8950
实现树形控件，适用于组织架构、文章列表等链表结构的功能。
已知现在有一个树形控件，请帮我用react+typescript+Ant Design+umi的开发框架实现可搜索树形控件的搜索框
06-08
好的，我可以帮您实现。首先，我们需要安装Ant Design和umi，您可以通过以下命令安装它们： ``` npm install antd --save npm install umi --save ``` 然后，我们需要创建一个可搜索树形控件的组件。以下是一个简单的实现示例： ```tsx import React, { useState } from "react"; import { Tree, Input } from "antd"; import { DataNode } from "antd/lib/tree"; interface SearchableTreeProps { treeData: DataNode[]; } const { Search } = Input; const SearchableTree: React.FC<SearchableTreeProps> = ({ treeData }) => { const [expandedKeys, setExpandedKeys] = useState<string[]>([]); const [searchValue, setSearchValue] = useState<string>(""); // 递归过滤树节点 const filterTree = (tree: DataNode[], searchValue: string): DataNode[] => { return tree .filter((node) => node.title?.includes(searchValue)) .map((node) => ({ ...node, children: node.children ? filterTree(node.children, searchValue) : null, })); }; // 搜索框onChange事件 const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => { const value = e.target.value; const expandedKeys = treeData .map((node) => { if (node.title?.includes(value)) { return node.key; } if (node.children) { return filterTree(node.children, value).map((child) => child.key); } return null; }) .flat() .filter((key) => key) as string[]; setExpandedKeys(expandedKeys); setSearchValue(value); }; // 树节点展开事件 const handleExpand = (expandedKeys: string[]) => { setExpandedKeys(expandedKeys); }; return ( <div> <Search placeholder="Search" value={searchValue} onChange={handleSearch} /> <Tree treeData={filterTree(treeData, searchValue)} expandedKeys={expandedKeys} onExpand={handleExpand} /> </div> ); }; export default SearchableTree; ``` 我们可以使用以上组件，将数据传入treeData属性中即可实现可搜索的树形控件。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值