如何反向行走树结构答案

【问题标题】：How to reverse walk a tree structure如何反向行走树结构
【发布时间】：2016-10-12 19:21:20
【问题描述】：

我将 XML 解析为 JSON。我想通过遍历 JSON 并在每个节点上调用 React.createElement 来构建一个 React 组件树。 React.createElement 的第三个参数是一个 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"
            }
         }
      ]
   }
}

【问题讨论】：

标签： javascript reactjs tree-traversal

【解决方案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);
}

【讨论】：

【解决方案2】：

您已经解决了一半的问题，因为您知道应该使用递归来遍历树。但是，不要在到达节点后立即渲染它，而是仅在递归堆栈的末尾或在处理完所有子节点后渲染它。这类似于二叉树的中序遍历。

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

   console.log(node);
}

iterate(section);

【讨论】：