2023年6月22日发(作者：)

react-antdTree（树形组件）默认展开和选中踩坑及使⽤前⾔：项⽬中使⽤antd-Tree组件（树形组件），要求默认展开编辑时默认选中，但是展开之后在点击收缩，和选中就⽆法选中了。必须配合onExpand和onCheck事件。⼀、项⽬环境react: 16

antd :3.x （本篇内容也适⽤于antd 4x版本）⼆、使⽤Tree 业务要求： 默认展开树结构，编辑时勾中已选中的1. 引⼊Tree和TreeNode2. 写⽣成树结构函数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) = { data: [ { title: "⼗三中学", key: 1, children: [ { title: "初⼀年级", key: 2, children: [ { title: "⼀班", key: 3, }, { title: "⼆班", key: 4, } ] }, { title: "初⼆年级", key: 3, } ] }, { title: "⼋⼗中学", key: 5, 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() { edKeysFn(); } renderTreeNode = (data) => { //⽣成树结构函数 if ( == 0) { return } return ((item) => { if (en && > 0) { return { TreeNode(en) } } return }) } expandedKeysFn = () => { let { data } = ; let arr = []; let loop = (data) => { ((item, index) => { (); if (en && > 0) { loop(en) } }) } loop(data); te({ te({ expandedKeys: arr }) } render() { let { data, expandedKeys, autoExpandParent, checkedKeys } = ; return (

); }}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) = { data: [ { title: "⼗三中学", key: 1, children: [ { title: "初⼀年级", key: 2, children: [ { title: "⼀班", key: 3, }, { title: "⼆班", key: 4, } ] }, { title: "初⼆年级", key: 3, } ] }, { title: "⼋⼗中学", key: 5, children: [ { title: "初⼀年级", 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() { edKeysFn(); } renderTreeNode = (data) => { //⽣成树结构函数 if ( == 0) { return } return ((item) => { if (en && > 0) { return { TreeNode(en) } } return }) } expandedKeysFn = () => {

let { data } = ; let arr = []; let loop = (data) => { ((item, index) => { (); if (en && > 0) { loop(en) } }) } loop(data); te({ expandedKeys: arr }) } } onExpand = expandedKeys => { //展开事件 ('onExpand', expandedKeys); te({ expandedKeys, autoExpandParent:false }); }; onCheck=(checkedKeys)=>{ //选中事件 te({checkedKeys}) } render() { let { data, expandedKeys,autoExpandParent,checkedKeys } = ; return (

); }}export default Index需要注意：expandedKeys 的类型也很重要，⽐如下⾯key是number类型expandedKeys也必须是数字expandedKeys=[1,2]，如果是这样xpandedKeys=["1","2"]也不会⽣效 具体可以看看这篇博客:：这个实例中key 175的type为number,key 176是字符串 当expandedKeys=["175",176] key 175就⽆法展开⽽key 176可以因展开为类型相同。当expandedKeys=["175",176]这样key 175也可以展开了。具体可以看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可以看这篇博客：参考antd Tree API