antd 的 Tree 控件沒(méi)有提供點(diǎn)擊展開(kāi)的功能，只能通過(guò)左邊的三角形實(shí)現(xiàn)展開(kāi)和收起，沒(méi)辦法只好自己實(shí)現(xiàn)這個(gè)功能。

截圖.gif

如圖實(shí)現(xiàn)的是類(lèi)似 Mac 文件目錄形式的結(jié)構(gòu)，有箭頭代表是個(gè)文件夾，點(diǎn)擊展開(kāi)文件夾，點(diǎn)擊外層文件夾可以收起整個(gè)文件夾。

首先根據(jù)服務(wù)器返回的 Json 數(shù)據(jù)生成樹(shù)形結(jié)構(gòu)

const data = {
    name: "root",
    children: [{
        name: "a",
        value: "/a",
        children: [{
            name: "file_1",
            value: "/a/file_1"
        }, {
            name: "a_1",
            value: "/a/a_1",
            children: [{
                name: "file_2",
                value: "/a/a_1/file_2"
            }, {
                name: "file_3",
                value: "/a/a_1/file_3"
            }]
        }, {
            name: "a_2",
            value: "/a/a_2",
            children: [{
                name: "file_4",
                value: "/a/a_2/file_4"
            }, {
                name: "file_5",
                value: "/a/a_2/file_5"
            }]
        }]
    }, {
        name: "b",
        value: "/b",
        children: [{
            name: "b_1",
            value: "/b/b_1",
            children: [{
                name: "file_6",
                value: "/b/b_1/file_6"
            }]
        }]
    }]
}

數(shù)據(jù)結(jié)構(gòu)中有 children 字段代表是個(gè)文件夾，因此需要遞歸遍歷出 TreeNode 視圖

import React from "react";
import Tree from 'antd/lib/tree';
import 'antd/lib/tree/style/css';

const TreeNode = Tree.TreeNode;

class TreeView extends React.Component {
    //遍歷json繪制出tree結(jié)構(gòu)
    mapData = (children) => {
        if (children && Array.isArray(children)) {
            return children.map((ele) => {
                if (ele.children && Array.isArray(ele.children)) {
                    return <TreeNode title={ele.name} key={ele.value}>
                        {this.mapData(ele.children)}
                    </TreeNode>
                } else {
                    return <TreeNode title={ele.name} key={ele.value}/>
                }
            })
        }
        return []
    }

    render() {
        let content = []

        let {name, children} = data
        if (name) {
            content.push(<TreeNode title={name} key="/">{this.mapData(children)}</TreeNode>)
        }

        return (
            <Tree>
                {content}
            </Tree>
        );
    }
}

export default TreeView

已經(jīng)完成第一步，生成樹(shù)形結(jié)構(gòu)視圖。接下來(lái)就是要實(shí)現(xiàn)點(diǎn)擊展開(kāi)樹(shù)形結(jié)構(gòu)

   state = {
        expandedKeys: ["/"],
        autoExpandParent: true,
        selectedKeys: []
    }

    //選中的回調(diào)
    onSelect = (selectedKeys, obj) => {
        let {expandedKeys} = this.state
        let selectedKey = this.state.selectedKeys
        //選中的狀態(tài)
        if (obj.selected) {
            //判斷是否已經(jīng)展開(kāi)，未展開(kāi)就添加到 expandedKeys 中
            //已經(jīng)展開(kāi)就不用管
            let index = expandedKeys.indexOf(selectedKeys[0])
            if (index === -1) {
                expandedKeys.push(selectedKeys[0])
                this.setState({
                    expandedKeys: expandedKeys,
                    selectedKeys: selectedKeys
                })
            } else {
                this.setState({
                    selectedKeys: selectedKeys
                })
            }

            // 沒(méi)有 children 代表當(dāng)前已沒(méi)有下一級(jí)目錄
            if (obj.event && obj.selectedNodes.length === 1 && !obj.selectedNodes[0].props.children) {
                //do something
            }
        } else {
            //selectedKey 是上次選中的元素 在 expandedKeys 肯定是存在的 
            //找到下標(biāo)后需要過(guò)濾掉子類(lèi)目錄 例如上次選中的元素為 /a ,
            //子類(lèi) /a/a_1 已經(jīng)展開(kāi)就需要從 expandedKeys 中移除這個(gè)元素
            let index = expandedKeys.indexOf(selectedKey[0])
            if (index !== -1) {
                //過(guò)渡掉子類(lèi)元素
                expandedKeys = expandedKeys.filter((ele) => {
                    return !ele.includes(selectedKey[0])
                })
                this.setState({
                    expandedKeys: expandedKeys,
                    selectedKeys: []
                })
            } else {
                this.setState({
                    selectedKeys: []
                })
            }
        }
    }

    //展開(kāi)的回調(diào)
    onExpend = (expandedKey, obj) => {
        let {expandedKeys} = this.state
        //展開(kāi)的狀態(tài)
        if (obj.expanded) {
            this.setState({
                expandedKeys: expandedKey,
                selectedKeys: []
            })
        } else {
            //expandedKey 返回的是當(dāng)前已經(jīng)展開(kāi)的元素 expandedKeys 是上次展開(kāi)的元素
            //比較兩個(gè)數(shù)組中缺少的元素得出當(dāng)前被收起的是哪個(gè)元素
            let removeArray = this.diffArray(expandedKey, expandedKeys)
            //收起的時(shí)候需要把里面展開(kāi)的元素一并移除，不然會(huì)造成收起動(dòng)作無(wú)效
            expandedKeys = expandedKeys.filter((ele) => {
                return !ele.includes(removeArray[0])
            })
            this.setState({
                expandedKeys: expandedKeys,
                selectedKeys: []
            })
        }
    }

    //比較出2個(gè)數(shù)組中不一樣的元素
    diffArray = (arr1, arr2) => {
        let arr3 = [];
        for (let i = 0; i < arr1.length; i++) {
            if (arr2.indexOf(arr1[i]) === -1)
                arr3.push(arr1[i]);
        }
        for (let j = 0; j < arr2.length; j++) {
            if (arr1.indexOf(arr2[j]) === -1)
                arr3.push(arr2[j]);
        }
        return arr3;
    }
    ......
    render() {
        return (
            <Tree
                onExpand={this.onExpend}
                expandedKeys={this.state.expandedKeys}
                autoExpandParent={this.state.autoExpandParent}
                onSelect={this.onSelect}
                selectedKeys={this.state.selectedKeys}>
                {content}
            </Tree>
        )
    }

以上就可以實(shí)現(xiàn)點(diǎn)擊展開(kāi)和收起功能
完整源碼地址