项目场景:
最近在使用Ant Design的 Tree 树形控件做树形数据展示,要求全部节点展示
问题描述
在API文档中可以看到defaultExpandAll属性可以设置默认展开所有树节点,但是在使用时发现,无法实现全部节点展开。
原因分析:
1、开始考虑觉得可能是expandedKeys (受控)展开指定的树节点与defaultExpandAll冲突导致;
2、避免1存在的情况测试,发现依旧无法展开全部节点,百度查看说defaultExpandAll在异步加载数据时不生效(default前缀属性只有在初始化时生效,因为异步加载数据时defaultExpandAll已经执行完成)
解决方案:
提示:可以通过受控expandedKeys或者在数据加载完成后渲染Tree来实现全部展开
我这边是使用同事封装的功用树组件,不好变更组件,就选择通过expandedKeys来控制Tree来实现全部展开。
原理:获取各节点下的末位子节点的key(这里就是你给树节点的唯一标识),再通过expandedKeys实现
部分代码段:
/*
* 初始化树形数据展开项回调事件
* @param treeData 接口获取的tree数据
* @returns {*}
* const [expandKey, setExpandKey] = useState<any>([]);
*/
const mapTreeData = (treeData) => {
const setExpandKeys:any = expandKey;
treeData.forEach(child => {
if (child.children && child.children.length > 0) {
mapTreeData(child.children);
}
setExpandKeys.push(child?.id);
});
setExpandKey([...setExpandKeys]);
};
⚠️这里用了递归实现
递归:就是函数的自我调用,通过这种方式,将问题分解成更小的版本的相同问题,从而解决问题。可以对复杂数组进行处理,例如数组嵌套数组,对象嵌套对象,或者更深层的嵌套关系。
这里使用递归而不是循环是因为我们不确定tree嵌套数据会有几层,不知道要遍历几层,递归比循环更加强大的地方在于,递归函数维持着一个保存每次递归调用当前状态的栈,允许函数获得子问题的结果后继续处理,使代码更简洁。
还有一点要注意:
由于递归维持当前状态栈,所以在递归函数中 setExpandKeys:any = expandKey, 保留之前存储的数据。
以上只是简单的记录,有什么表达不明确或者不合理之处,还望指教,希望对你有所帮助