Comment inverser la marche d'une structure arborescente

Question

J'ai XML analysé comme JSON. Je veux créer une arborescence de composants React en traversant le JSON et en appelant React.createElement sur chaque nœud. Le troisième argument à React.createElement est un tableau d'éléments React enfant. Cela signifie que je dois descendre l'arbre jusqu'aux nœuds feuilles, créer d'abord les éléments Réagir, puis remonter chaque branche.

Une itération simple et récursive sur une arborescence est assez simple. Je ne sais pas comment dire "d'accord, maintenant vous êtes au noeud feuille, remonter". Y a-t-il des techniques pour cela?

données de l'échantillon:

{ 
    "section":{ 
     "attrs":{ 
     "class":"foo", 
     "data-foo":"foo" 
     }, 
     "#name":"section", 
     "children":[ 
     { 
      "attrs":{ 
       "class":"region-1" 
      }, 
      "#name":"p", 
      "children":[ 
       { 
        "attrs":{ 
        "data-children":"true" 
        }, 
        "#name":"span" 
       } 
      ], 
      "span":[ 
       { 
        "attrs":{ 
        "data-children":"true" 
        } 
       } 
      ] 
     }, 
     { 
      "attrs":{ 
       "class":"second" 
      }, 
      "#name":"div" 
     } 
     ], 
     "p":[ 
     { 
      "attrs":{ 
       "class":"region-1" 
      }, 
      "children":[ 
       { 
        "attrs":{ 
        "data-children":"true" 
        }, 
        "#name":"span" 
       } 
      ], 
      "span":[ 
       { 
        "attrs":{ 
        "data-children":"true" 
        } 
       } 
      ] 
     } 
     ], 
     "div":[ 
     { 
      "attrs":{ 
       "class":"second" 
      } 
     } 
     ] 
    } 
} 

Answer 1

En général, vous pouvez utiliser cet algorithme. J'ai utilisé d'autres données pour plus de clarté. Votre code spécifique à l'application va à la place de l'instruction console.log. Pour la robustesse, j'ai ajouté un test pour l'existence d'une propriété enfants, et modifié les données pour le tester.

var data = { 
 
    name: 'Parent', 
 
    children: [{ 
 
      name: 'Child 1', 
 
      children: [{ 
 
        name: 'Child 1a', 
 
        children: [] 
 
       }, { 
 
        name: 'Child 1b' 
 
       } 
 
      ] 
 
     }, { 
 
      name: 'Child 2', 
 
      children: [{ 
 
        name: 'Child 2a', 
 
        children: [] 
 
       }, { 
 
        name: 'Child 2b', 
 
        children: [] 
 
       } 
 
      ] 
 
     } 
 
    ] 
 
}; 
 

 
walk(data); 
 

 
function walk(node) { 
 
    if (node.children !== undefined) { 
 
     node.children.forEach(function(child) { 
 
      walk(child); 
 
     }); 
 
    } 
 

 
    console.log(node.name); 
 
}

Answer 2

Vous avez déjà résolu la moitié de votre problème, puisque vous savez que vous devez utiliser la récursivité pour itérer à travers l'arbre. Mais au lieu de rendre le noeud dès que vous y arrivez, rendez-le seulement à la fin de la pile récursive, ou après avoir traité tous les enfants. C'est quelque chose comme la traversée dans l'ordre pour les arbres binaires.

function iterate(node) { 
    if (node.children) { 
     node.children.forEach(function (child) { 
     iterate(child); 
     }); 
    } 

    console.log(node); 
} 

iterate(section);