javascript - 循环遍历层次结构树并从中创建一个 REACT UI
问题描述
所以我有一个项目,我正在尝试完成一个层次结构树。从树中,我需要遍历数据并在 UI 中创建树,以便用户可以浏览其层次结构树。
这是一个例子:
`const tree = [
{
name: "Root Node",
nodes: [
{
name: "Node 1",
nodes: [
{
name: "Sub node"
}
]
},
{
name: "Node 2",
nodes: [
{
name: "Sub node "
}
]
},
{
name: "Node 3",
nodes: [
{
name: "Sub node"
}
]
}
]
}
];`
现在这个层次结构可以有任意数量的节点和任意数量的子节点。所以代码应该是递归的,以便它适用于任何数量的节点。
因此,我尝试了一些方法来尝试遍历节点并获取所有节点,但我正在努力将检索到的数据应用到 UI。
我的第一次尝试是创建一个循环遍历所有顶级节点的函数。对于每个顶级节点,遍历其子节点并获取名称,然后如果该子节点有自己的子节点,则递归调用相同的函数来获取这些节点。但是我遇到的问题是如何存储每个节点的名称,并且当我将它渲染到我的反应视图时,每个节点都在正确的父节点下。
`function getTree(node){
let nodeName = node.name;
let children = getChildren(node);
// now I have the parent (nodeName) and its children ?
}`
`function getChildren(node){
let children = []; // store the data in here somehow?
if(node.nodes){ //if this node has its own child nodes
for (var j = 0; j < node.nodes.length; j++) {
if (node.nodes[j].nodes){
getChildren(org.nodes[j].nodes);
}
}
}
}`
我觉得我在正确的路线上,但它仍然感觉不对或工作。在 react 渲染方法中,我将映射到上面的树 const 并将每个树节点传递给 getTree 函数。
解决方案
arrayUIparser =(arr)=>{
const res =[];
let {name,nodes} =arr[0];
if(!nodes){
res.push(<li>{name}</li>)
}else {
res.push(nodes.map((item)=>{
return <ul>{item.name}<li> {this.arrayUIparser(item.nodes)} </li></ul>}))
}
return <ul >{res}</ul>;
}
如果我理解正确,它可能是这样的。
推荐阅读
- java - 用于打印到文件的循环永远加载并且即使关闭也文件空白?
- vba - 当单元格为空白并且有很多例程时如何处理错误
- python - python read data from variable and write to a file (no print) which i wanted to use later as backup data
- python - Seamlessly and efficiently flipping numpy array or sparse matrix along all axes
- c++ - Comparison Vs Relational expressions in c++
- python - Python Atom Hydrogen, stepping through code line by line, or all at once
- javascript - Ball bouncing issue
- r - rvest empty list for table via xpath
- angular - Ionic3 Angular6 : Template parse errors the pipe 'translate' could not be found in pushed pages
- java - Problem in fetching data using CriteriaBuilder