Javascript React.js：在呈现之前从嵌套的JSON动态创建复杂DOM

最近，我试图解决一个问题，我必须从来自请求调用的嵌套JSON呈现文档树菜单（分层）

假设我的JSON看起来像这样

[{
    "title": "Food",
    "path": "/root",
    "children": [{
        "title": "Veg",
        "path": "/root/Food",
        "children": [{
            "title": "Carrot",
            "path": "/root/Food/Veg",
            "children": [{
                "title": "Ooty carrot",
                "path": "/root/Food/Veg/Brinjal",
                "children": []
            }]
        }]
    }]
}, {
    "title": "Cloths",
    "path": "/root",
    "children": [{
        "title": "T shirt",
        "path": "/root/Cloths",
        "children": []
    }, {
        "title": "Shirt",
        "path": "/root/Cloths",
        "children": []
    }]
}]

我必须从上面的JSON创建以下DOM

通过jQuery解决： 我已准备好将JSON转换为DOM的函数：在普通jQuery中，我将执行以下操作：

$(function(){
    function get_tree(tree_data){
      dom += '<ul>';
      for(var i in tree_data){
        if(tree_data[i].children.length > 0){
          dom += '<li>';
          dom += '<a href="#" class="tree-parent-anchor">'+tree_data[i].title+'</a>';
          get_tree(tree_data[i].children);
          dom += '<li>';
        }
        else{
          dom += '<li>'+tree_data[i].title+'</li>'
        }
      }
      dom+= '</ul>'
    }
    var tree_data = JSON.parse($('pre').text());
    var dom= '<ul id="Menu-list">';
            get_tree(tree_data);
        dom+= '</ul>'
    $('div').append(dom);
})

$（函数（）{
函数获取树（树数据）{
dom+='
'；
for（树_数据中的变量i）{
if（树数据[i].children.length>0）{
dom+='
'；
dom+=''；
获取树（树数据[i]。子对象）；
dom+='
'；
}
否则{
dom+='
'+树数据[i].标题+'
'
}
}
dom+='
'
}
var tree_data=JSON.parse（$（'pre'）.text（））；
var dom='
；
获取树（树数据）；
dom+='
'
$（'div'）.append（dom）；
})

在REACT.JS中，我尝试了以下方法（因为它不起作用）：

导出默认类DocTree扩展组件{
state={treeData:[{
“标题”：“食品”，
“路径”：“/根”，
“儿童”：[{
“标题”：“蔬菜”，
“路径”：“/根/食物”，
“儿童”：[{
“头衔”：“胡萝卜”，
“路径”：“/根/食物/蔬菜”，
“儿童”：[{
“标题”：“Ooty carrot”，
“路径”：“/根/食物/蔬菜/布林哈尔”，
“儿童”：[]
}]
}]
}]
}, ...
}]
}
render（）{
const tree_data=this.state.treeData；
函数get_tree（树数据，dom）{

for（树_数据中的变量i）
if（树数据[i].children.length>0）

获取树（树数据[i]。子对象）；

其他的
{tree_data[i].title}

var dom=

获取树（树数据）；

返回(
{dom}
);
}
}

我不知道如何通过React.js语法实现同样的效果

请帮助我-如何在React.js中实现它（我使用React.js 16.2.0）

---

不能在JSX中使用for循环，其次，可以在映射到每个对象后递归地呈现树

const数据=[{
“标题”：“食品”，
“路径”：“/根”，
“儿童”：[{
“标题”：“蔬菜”，
“路径”：“/根/食物”，
“儿童”：[{
“头衔”：“胡萝卜”，
“路径”：“/根/食物/蔬菜”，
“儿童”：[{
“标题”：“Ooty carrot”，
“路径”：“/根/食物/蔬菜/布林哈尔”，
“儿童”：[]
}]
}]
}]
}, {
“标题”：“布料”，
“路径”：“/根”，
“儿童”：[{
“标题”：“T恤”，
“路径”：“/根/布”，
“儿童”：[]
}, {
“头衔”：“衬衫”，
“路径”：“/根/布”，
“儿童”：[]
}]
}]
常量MyComponent=（{data}）=>{
返回(

{data.map（（m，index）=>{
返回（

{m.title}
{m.children&&}
）；
})}

);
}
类应用程序扩展了React.Component{
render（）{
返回
}
}
ReactDOM.render（，document.getElementById（'root'））
您误解了JSX

让它像一个服务器端语言（例如：PHP，ASP），
您所做的是
嵌入HTML和JSX
，就像
嵌入HTML和PHP

为什么？
JSX是js，JSX元素是隐藏的对象

您可以运行一些hello world JSX来查看JSX是如何传输到ES5的（在ES5浏览器的情况下），您将理解JSX

有关更多详细信息，请阅读React Basic，尤其是


最后，这是工作所需的修改：

function get_tree(tree_data, dom){
  var elems = [];

  for(var i in tree_data)
    if(tree_data[i].children.length > 0)
      elems.push(<li>
          <a href="#" className="tree-parent-anchor">{tree_data[i].title}</a>
          {get_tree(tree_data[i].children)}
          </li>)
    else
      elems.push(<li>{tree_data[i].title}</li>)

  return <ul>{elems}</ul>
}

函数获取树（树数据，dom）{
变量元素=[]；
for（树_数据中的变量i）
if（树数据[i].children.length>0）
元素推送（

{get_tree（tree_data[i].children）}
）
其他的
元素推送（
{tree\u data[i].title}
）
返回
{elems}
}

 BTW，你的代码在实践中是坏的，因为你是新的反应，你应该考虑<代码> @ Subhan-KaTuri想法并遵循他的实践。
function get_tree(tree_data, dom){
  var elems = [];

  for(var i in tree_data)
    if(tree_data[i].children.length > 0)
      elems.push(<li>
          <a href="#" className="tree-parent-anchor">{tree_data[i].title}</a>
          {get_tree(tree_data[i].children)}
          </li>)
    else
      elems.push(<li>{tree_data[i].title}</li>)

  return <ul>{elems}</ul>
}