如图所示，我现在是用 tree 的 DFS 的方式，创建 react component，画出来的。
但是，我看很多建议，扁平化数据，用一个 list 来画深层次的结构。拍扁树没问题，逐层缩进问题也不大，但是，“双击”展开或者关闭 parent 结点，始终没有找到好的方法。或者是不是在定义 listnode 的数据结构方面，需要特别的技巧处理一下，能够方便后面的展开 /关闭结点？
特来请教一下大家。
谢谢！
这里有 treenode 方式的 demo
https://codesandbox.io/s/treeviewdemo-geb72
 |
1
rrfeng Jul 9, 2021 via Android
大把的现成 tree 组件找一个就行了
|
 |
2
hwlhwlxyz Jul 9, 2021
我觉得展开关闭就你这样写没有问题，要用的节点数量应该没有多到卡就行了。在不知道最多有几层的情况下，以我的知识，没有其他更好的方法。
我的需求里面没有觉得展开关闭会有性能方便的影响。但是我遇到的问题是，节点下面增加很多节点（或者说一棵子树）性能不行，会明显感到有点卡顿。大概有几十个节点，有 5 层，但是最多层数是不确定的。我用的是 Angular，新增节点要全部重绘，感觉可能问题在这里，要优化这个太费时间了，我也没什么经验，所以这个问题就先放一边了。 等待其他研究过的大佬的想法。 |
 |
3
otakustay Jul 9, 2021
我的观点是数据不能拍扁（也没啥用），DOM 结构拍扁
|
 |
4
yazoox OP |
 |
5
JerryCha Jul 9, 2021
扁平化数据结构要带上层次信息的话，用 path 应该是能解决的
|
 |
6
dengshen Jul 9, 2021 via iPhone
拍成链表结构
|
|
7
otakustay Jul 9, 2021
如果你的数据结构没有拍扁，只是 DOM 扁的话，我理解打开收起不要动画是很容易做的，数据结构上还有 children，直接置个 flag 就行
要动画的话倒是比较麻烦 |
 |
8
3dwelcome Jul 9, 2021
换我就直接 DOM 操作，既然你处理了逐层缩进，那用 JS 来对 list 遍历上下关系节点，还是能靠缩进对比，来找到一定的父子关系。
有父子关系，就能顺利展开 /关闭子节点。 |
 |
9
qrobot Jul 15, 2021
@yazoox htt 。p 。s://github 。com/HighPerformanceComponent/rc-grid/blob/canary/packages/rc-grid/src/DataGrid.tsx#L309-L348
你看这段代码， 大概的思路就是这样的，行里面有通过一个方法获取自己的子节点（我这里是通过 onChildrenRows 来获取的），如果你要改成从 list 中获取也是一样的。 循环遍历一下 list 本身，其实就是一个递归就可以处理了。 你可以下载项目， 执行 yarn 在执行 yarn start 。 然后点击里面的 tree 表格。 你会发现其实就是一个拍扁了的 div list > 注意要使用 yarn 不能用 npm |
Select Language