如何反向遍历树结构

Question

我将 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"
            }
         }
      ]
   }
}

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