前言：

项目中使用antd-Tree组件（树形组件），要求默认展开编辑时默认选中，但是展开之后在点击收缩，和选中就无法选中了。必须配合onExpand和onCheck事件。

一、项目环境

react: 16 

antd :3.x （本篇内容也适用于antd 4x版本）

二、使用Tree

        业务要求：

               默认展开树结构，编辑时勾中已选中的

1. 引入Tree和TreeNode
2. 写生成树结构函数
3. 添加展开key值和选中key值

代码如下：

  一般不会使用defaultCheckedKeys和defaultExpandedKeys,要实现业务要求，需要expandedKeys和onExpand、checkedKeys和onCheck结合使用。

import React, { Component } from 'react';
import { Tree } from 'antd';
const { TreeNode } = Tree;
class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [
                {
                    title: "十三中学",
                    key: 1,
                    children: [
                        {
                            title: "初一年级",
                            key: 2,
                            children: [
                                {
                                    title: "一班",
                                    key: 3,
                                },
                                {
                                    title: "二班",
                                    key: 4,
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 3,
                        }
                    ]
                },
                {
                    title: "八十中学",
                    key: 5,
                    children: [
                        {
                            title: "初一年级",
                            key: 6,
                            children: [
                                {
                                    title: "一班",
                                    key: 7,
                                },
                                {
                                    title: "二班",
                                    key: 8,
                                    children: [
                                        {
                                            title: "一组",
                                            key: 9
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 9,
                        }
                    ]
                }
            ],
            expandedKeys: [], //展开的key值
            autoExpandParent: true,
            checkedKeys: [3] //选中的key
        }
    }
    componentDidMount() {
        this.expandedKeysFn();
    }

    renderTreeNode = (data) => { //生成树结构函数
        if (data.length == 0) {
            return
        }
        return data.map((item) => {
            if (item.children && item.children.length > 0) {
                return <TreeNode title={item.title} key={item.key} >
                    {
                        this.renderTreeNode(item.children)
                    }
                </TreeNode>
            }
            return <TreeNode key={item.key} {...item}></TreeNode>
        })
    }
    expandedKeysFn = () => {
        let { data } = this.state;
        let arr = [];
        let loop = (data) => {
            data.map((item, index) => {
                arr.push(item.key);
                if (item.children && item.children.length > 0) {
                    loop(item.children)
                }
            })
        }
        loop(data);
        this.setState({
            expandedKeys: arr
        })
    }
    render() {
        let { data, expandedKeys, autoExpandParent, checkedKeys } = this.state;
        return (
            <div>
                <Tree
                    checkable
                    expandedKeys={expandedKeys} //默认展开的key
                    autoExpandParent={autoExpandParent} //是否自动展开父节点
                    checkedKeys={checkedKeys} //选中的key
                >
                    {this.renderTreeNode(data)}
                </Tree>
            </div>
        );
    }
}

export default Index复制

只用expandedKeys和checkedKeys的问题   无法收缩和选中了。

三、解决方案：

import React, { Component } from 'react';
import { Tree } from 'antd';
const { TreeNode } = Tree;
class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [
                {
                    title: "十三中学",
                    key: 1,
                    children: [
                        {
                            title: "初一年级",
                            key: 2,
                            children: [
                                {
                                    title: "一班",
                                    key: 3,
                                },
                                {
                                    title: "二班",
                                    key: 4,
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 3,
                        }
                    ]
                },
                {
                    title: "八十中学",
                    key: 5,
                    children: [
                        {
                            title: "初一年级",
                            key: 6,
                            children: [
                                {
                                    title: "一班",
                                    key: 7,
                                },
                                {
                                    title: "二班",
                                    key: 8,
                                    children: [
                                        {
                                            title: "一组",
                                            key: 9
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 9,
                        }
                    ]
                }
            ],
            expandedKeys: [], //展开的key值
            autoExpandParent: true,
            checkedKeys:[3] //选中的key
        }
    }
    componentDidMount() {
        this.expandedKeysFn();
    }

    renderTreeNode = (data) => { //生成树结构函数
        if (data.length == 0) {
            return
        }
        return data.map((item) => {
            if (item.children && item.children.length > 0) {
                return <TreeNode title={item.title} key={item.key} >
                    {
                        this.renderTreeNode(item.children)
                    }
                </TreeNode>
            }
            return <TreeNode key={item.key} {...item}></TreeNode>
        })
    }
    expandedKeysFn = () => { 
        let { data } = this.state;
        let arr = [];
        let loop = (data) => {
            data.map((item, index) => {
                arr.push(item.key);
                if (item.children && item.children.length > 0) {
                    loop(item.children)
                }
            })
        }
        loop(data);
        this.setState({
            expandedKeys: arr
        })
    }
    onExpand = expandedKeys => { //展开事件
        console.log('onExpand', expandedKeys);
        this.setState({
          expandedKeys,
          autoExpandParent:false
        });
      };
      onCheck=(checkedKeys)=>{ //选中事件
          this.setState({checkedKeys})
      }
    render() {
        let { data, expandedKeys,autoExpandParent,checkedKeys } = this.state;
        return (
            <div>
                <Tree
                    checkable
                    expandedKeys={expandedKeys} //默认展开的key
                    onExpand={this.onExpand} //展开事件
                    autoExpandParent={autoExpandParent} //是否自动展开父节点
                    checkedKeys={checkedKeys} //选中的key
                    onCheck={this.onCheck} //选中事件
                >
                    {this.renderTreeNode(data)}
                </Tree>
            </div>
        );
    }
}

export default Index复制

需要注意：

expandedKeys 的类型也很重要，比如下面key是number类型expandedKeys也必须是数字expandedKeys=[1,2]，如果是这样xpandedKeys=["1","2"]也不会生效

     具体可以看看这篇博客:

https://blog.csdn.net/weixin_44058725/article/details/116983437#comments_19433765https://blog.csdn.net/weixin_44058725/article/details/116983437#comments_19433765

官网例子在线演示：这个实例中key 175的type为number,key 176是字符串 当expandedKeys=["175",176] key 175就无法展开而key 176可以因展开为类型相同。当expandedKeys=["175",176]这样key 175也可以展开了。具体可以看antd tree expandedKeys注意事项

data: [
                {
                    title: "十三中学",
                    key: 1,
                    children: [
                        {
                            title: "初一年级",
                            key: 2,
                            children: [
                                {
                                    title: "一班",
                                    key: 3,
                                },
                                {
                                    title: "二班",
                                    key: 4,
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 3,
                        }
                    ]
                },
                {
                    title: "八十中学",
                    key: 5,
                    children: [
                        {
                            title: "初一年级",
                            key: 6,
                            children: [
                                {
                                    title: "一班",
                                    key: 7,
                                },
                                {
                                    title: "二班",
                                    key: 8,
                                    children: [
                                        {
                                            title: "一组",
                                            key: 9
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 9,
                        }
                    ]
                }
            ]复制

四、总结：

antd跟默认相关的前缀有default的都只是第一次有用，第二次就没用了。比图input默认值，checkbox值等。都必须结合事件触发。

关于antd树形Table可以看这篇博客：

react-antd table树形数据默认展开行实现

antd-tree组件带搜索框的使用及踩坑（只标红）

antd-tree组件带搜索框的使用及踩坑（只保留搜索的内容并且标红）

参考antd Tree API

antd Tree组件api