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

你好昵称已存在

于 2020-09-06 01:06:59 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_43207103/article/details/108427073

版权

本文介绍如何使用React和Antd库创建树形控件，并演示了如何递归生成数据。示例代码可直接运行，支持左侧图标自定义，允许添加个人Logo。参考链接提供更高级的自定义图标教程。

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

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",

最低0.47元/天解锁文章