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

在REACT.JS中，我尝试了此操作（实际上它不起作用）：

export default class DocTree extends Component{
    state = {treeData: [{
            "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": []
                    }]
                }]
            }]
        }, ...
        }]
    }

    render(){
        const tree_data = this.state.treeData;
        function get_tree(tree_data, dom){
              <ul>
                for(var i in tree_data)
                    if(tree_data[i].children.length > 0)
                        <li>
                            <a href="#" className="tree-parent-anchor">{tree_data[i].title}</a>
                            get_tree(tree_data[i].children);
                        <li>

                    else
                        <li>{tree_data[i].title}</li>
                </ul>

        var dom = <ul id="Menu-list">
            get_tree(tree_data);
        </ul>

        return(
            <div>
                {dom}
            </div>
        );
    }
}

我没有确切地通过React.js语法实现相同的目的

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

Shubham Khatri

您不能在JSX中使用for循环，其次，您可以在映射到每个对象之后递归渲染树

const data =[{
    "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": []
    }]
}]


const MyComponent = ({data}) => {
   return (
    <ul>
      {data.map((m, index) => {
        return (<li key={index}>
          {m.title}
          {m.children && <MyComponent data={m.children} />}
        </li>);
      })}
    </ul>
  );
}
class App extends React.Component {

  
  render() {
     return <div>
        <MyComponent data={data} />
     </div>
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="root"/>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。