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

通常，您可以使用此算法。我清楚地使用了其他数据。特定于应用程序的代码代替onProgressUpdate语句。为了提高稳健性，我添加了一个测试是否存在子属性，并更改了数据以进行测试。

console.log

Answer 2

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

const category = _.forOwn(res.body, function(val, key){
      const arrayOpportunityCategory = val.category.split(" ")
      if(arrayOpportunityCategory.indexOf(interest.raw) > -1){
        const suggestedOpportunity = []
        suggestedOpportunity.push(val)
      } else {
        console.log('Sorry, we have nothing of that sort.')
      }
    })

  }

如何逆转走树结构

2 个答案: