Question

因此，我有一个项目正在尝试完成，在其中获得了层次结构树。从树中，我需要遍历数据并在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 render方法中，我映射到上面的树const上，并将每个树节点传递到getTree函数中。

Answer 1

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>;    
  }

如果我理解你说得对，可能就是这样。

遍历层次结构树并从中创建REACT UI

1 个答案: