ツリー構造を逆戻りする方法

Question

私はJSONとして解析されたXMLを持っています。 JSONをトラバースして各ノードでReact.createElementを呼び出すことで、Reactコンポーネントツリーを構築したいと考えています。 React.createElementの3番目の引数は、子のReact要素の配列です。これは、ツリーの下を葉ノードまで歩いて、最初にそれらのReact要素を作成してから、各ブランチに戻る必要があることを意味します。

単純な再帰的な反復は、ツリー構造上では単純です。私は "大丈夫、今あなたは葉のノードにいる、戻って行く"と言う方法がわからない。これには技術がありますか？

サンプルデータ：一般的に

{ 
    "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

、あなたは、このアルゴリズムを使用することができます。わかりやすくするために他のデータを使用しました。アプリケーション固有のコードは、console.logステートメントの代わりに使用されます。堅牢性のために、私は子供のプロパティの存在のテストを追加し、それをテストするためにデータを変更しました。

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

あなたがツリーを反復処理するために再帰を使用する必要があることを知っているので、あなたはすでに、半分あなたの問題を解決しました。しかし、ノードをすぐにレンダリングするのではなく、再帰的スタックの終わりにレンダリングするか、すべての子を処理した後にレンダリングします。これはバイナリツリーの順序通りのトラバースのようなものです。

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

    console.log(node); 
} 

iterate(section);