antd_Tree_树的节点名称相同引发的未点击但被选中

最新推荐文章于 2024-05-28 17:11:58 发布

前端小妹

最新推荐文章于 2024-05-28 17:11:58 发布

阅读量671

点赞数

分类专栏： react js 前端问题记录文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_51545524/article/details/120533256

版权

js 同时被 3 个专栏收录

22 篇文章

订阅专栏

前端问题记录

9 篇文章

订阅专栏

react

8 篇文章

订阅专栏

在使用antd的Tree组件时，如果存在节点名称相同的状况，会出现未点击却选中的现象。文章详细描述了这个问题，并探讨了原始树结构的处理，特别是在2.1章节中讨论了如何加工树状数据显示，以及在2.2章节中遇到的onCheck事件处理父节点获取不到的问题和日志异常检测。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：树结构（node重复）

问题：点击第一个，由于第二个名字相同，默认了两个都被选中

2: 原始树结构

2.1:加工树状显示

setLeftTree(prev => {
                    if (!!info && !!Object.keys(info).length) {
                        return Object.entries(info).map(item => {
                            setExpandedKeys(prev => prev.concat(item[0]))
                            return {
                                title: item[0],
                                key: item[0],
                                children: item[1].map(i => {
                                    return {
                                        title: i,
                                        key: `${item[0]}chi&$ld${i}`,
                                    }
                                })
                            }
                        })
                    }
                    return []
                })

`${item[0]}chi&$ld${i}`使得不同的父节点下的名字相同的node不再一样，名字相同时就会拿到不同的节点

2.2 onCheck(树的父节点有个拿不到)

const onCheck = (checkedKeys, e) => {
        const {halfCheckedKeys = [], checkedNodes = []} = e;

父节点和节点的数组（日志异常检测）