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

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;