Цикл по иерархическому дереву и создание из него REACT UI - PullRequest
Новая
       7

Цикл по иерархическому дереву и создание из него REACT UI

0 голосов
/ 07 февраля 2019

Итак, у меня есть проект, который я пытаюсь завершить, где мне дано дерево иерархии.Из дерева мне нужно перебрать данные и создать дерево в пользовательском интерфейсе, чтобы пользователь мог перемещаться по их иерархическому дереву.

Вот пример: 

`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"
          }
        ]
      }
    ]
  }
];`

Теперь эта иерархияможет иметь любое количество узлов и любое количество дочерних узлов.Так что код должен быть рекурсивным, чтобы он работал для любого количества узлов.

Итак, я попробовал несколько вещей, чтобы попытаться перебрать все узлы и получить их все, но я изо всех сил пытаюсь затем применить полученныеданные в пользовательский интерфейс.

Моей первой попыткой было создание функции, которая перебирает все узлы верхнего уровня.Для каждого узла верхнего уровня выполните цикл по его дочерним узлам и получите имена, затем, если у этого дочернего узла есть свои собственные подузлы, то рекурсивно вызывайте эту же функцию для получения этих узлов.Но проблема, с которой я сталкиваюсь, заключается в том, как сохранить имя каждого узла и сделать так, чтобы при отображении его в моем представлении реакции каждый узел находился под правильным родителем. 

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

Я чувствую, что я направильные линии, но это все еще не чувствует себя хорошо или работает.В методе реагирования рендеринга я затем отображаю дерево const выше и передаю каждый узел дерева в функцию getTree.

1 Ответ

0 голосов
/ 07 февраля 2019 
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>;    
  }

Если я вас правильно понимаю, это может быть что-то в этом роде.

...