循环遍历层次结构树并从中创建一个 REACT UI

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 方法中，我映射到上面的树常量并将每个树节点传递给 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>;    
  }

如果我没听错的话，可能是这样的。