通过层次树循环，创造一个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);
    }
  }
  }
}`

我觉得右边线IM，但它仍然感觉不对或工作。在该反应渲染方法，我然后在树常量上述映射，并且每个树节点通入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>;    
  }

如果我理解你的权利也可以是类似的东西。