我正在创建一个React应用程序，它有一个"SplitPane"组件，基本上是一个水平或垂直分割的div(中间的分隔符可以拖动来调整大小):
____ _________ _________
| | | | | | | |
|____| |____|____| |__|______|
| |
|____|
可以递归嵌套，形成如下结构:
_____________
| |___| |
| |___|___|
|_____|_____|_|
| | |
|_______|_____|
|_______|_____|
或任何其他此类任意组合。
我希望用户能够用箭头键合理地切换单元格，但由于这是一个组件树，它在内存中看起来像这样:
H
/
H V
/ /
* * H *
/
* H
/
* *
地点:
- 'H':=水平分割窗格
- 'V':=垂直分割的窗格
- '*':=叶片成分
我想知道是否有一种算法可以用来轻松地遍历这棵树，以获得顶部，底部，左侧或右侧组件，这些组件可能是组件树上的几个分支。
让我们使用三种数据结构:parent,first_child和level数据结构。
parent数据结构，跟踪ith节点的parent。
first_child数据结构，跟踪ith节点的第一个子节点。
level数据结构，跟踪ith级别的节点。
考虑下面的树:
a
/
b c
level[0] = {a}, level[1] = {b, c}
parent[b] = parent[c] = a
first_child[a] = b
当向上箭头被按下时，我们转到当前节点的父节点，当向下箭头被按下时，我们转到子节点，当左右箭头被按下时，我们转到特定级别的左右节点。
注意:level[i]中的节点可以按排序顺序存储，并使用二分查找有效地找到左、右邻居。如果我们每次给react组件的key值赋一个递增的值，它将默认排序。