react+antd Tree树控件（Demo可以直接运行）实现（递归生成数据）同时支持左边图标自定义也可以加自己的Logo

最新推荐文章于 2025-10-28 09:55:17 发布

原创

最新推荐文章于 2025-10-28 09:55:17 发布 · 2.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍如何利用React和Ant Design库构建一个可控制的树形组件，展示了一个从数据库获取的组织结构，并实现了节点的展开、折叠及选中功能。通过设置受控属性如`expandedKeys`、`selectedKeys`来管理树的状态，同时提供了自定义图标的方法。

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 = {
   
   
        "id": "org-1",
        "name": "公安分局",
        "suborgs": [
            {
   
   
                "id": "org-6",
                "name": "巡特警大队",
                "suborgs": []
            },
            {
   
   
                "id": "org-7",
                "name": "交警大队",
                "suborgs": []
            },
            {
   
   
                "id": "org-8",
                "name": "东山所",
                "suborgs": [
                    {
   
   
                        "id": "org-15",
                        "name": "测试部门2",