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

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",
                        "suborgs": [
                            {
                                "id": "org-18",
                                "name": "最后一级部门01"
                            },
                            {
                                "id": "org-20",
                                "name": "最后一级部门02"
                            }
                        ]
                    },
                    {
                        "id": "org-17",
                        "name": "测试部门1",
                        "suborgs": []
                    }
                ]
            },
            {
                "id": "org-9",
                "name": "郭巷所",
                "suborgs": [
                    {
                        "id": "org-16",
                        "name": "测试",
                        "suborgs": []
                    },
                    {
                        "id": "org-19",
                        "name": "测试2",
                        "suborgs": []
                    }
                ]
            },
            {
                "id": "org-10",
                "name": "临湖所",
                "suborgs": []
            }
        ]
    };

    let treeData = [];
    let oneExpandedKeys = [];
    //默认打开100个结点，也就是说默认打开全部结点
    for (let i = 0; i < 100; i++)
        oneExpandedKeys.push(`org-${i}`)
    const [expandedKeys, setExpandedKeys] = useState(oneExpandedKeys);
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [selectkey, setSelectkey] = useState("org-1");
    const [autoExpandParent, setAutoExpandParent] = useState(true);
    const [isRoot, setIsRoot] = useState(true)//控制主节点打开、关闭图标

    //递归
    function isTreeData_1(d) {
        return {
            icon:[0].map(value=>{
                if(d.suborgs&&d.suborgs.length)
                    return d.id=='org-1'?<SmileOutlined />:<WalletOutlined />
                else
                    return <TabletOutlined />
            }),
            title: d.name,
            key: d.id,
            children: d.suborgs && d.suborgs.length ? d.suborgs.map(d => { return isTreeData_1(d) }) : []
        }
    }
    treeData = [isTreeData_1(d)]

    //展开/收起节点时触发
    const onExpand = (expandedKeys, obj) => {
        setExpandedKeys(expandedKeys);
        setAutoExpandParent(false);//如果没有设置autoExpandParent为false，如果子元素展开，父元素不能折叠。
        if (expandedKeys.indexOf("org-1") != -1)
            setIsRoot(true)//打开
        else
            setIsRoot(false)//关闭
    };

    //点击树节点触发
    const onSelect = (selectedKeys, info) => {
        setSelectedKeys(selectedKeys);
        setSelectkey(selectedKeys[0])
        // 外面传进来的函数
        if (props.setIsTowSelectedKeys)
            props.setIsTowSelectedKeys(selectedKeys)
    };

    return (
        <>
            {treeData.length && <Tree
                onExpand={onExpand} //展开/收起节点时触发
                expandedKeys={expandedKeys} //（受控）展开指定的树节点
                autoExpandParent={autoExpandParent} //是否自动展开父节点
                onSelect={onSelect} //点击树节点触发
                selectedKeys={selectedKeys} //（受控）设置选中的树节点
                treeData={treeData}
                showIcon={true}
                blockNode   //是否节点占据一行
            />}
        </>
    )
}

export default IsTree;

• 上面树左侧的图片是调用antd里面的图片，如果想上传自己个人设计的图标可以参考这篇将展示如何更换高级自定义图标：
  https://blog.csdn.net/weixin_43207103/article/details/108353335

小结

上面主要是采用树的受控的API来实现。 更多内容静待更新。