美文网首页
React递归生成导航树

React递归生成导航树

作者: RageYourDream_ | 来源:发表于2017-03-12 19:50 被阅读0次

    经历三天从坑里爬出来之后的总结

    首先要构造一个虚拟DOM

    不要构造标签字符串!!!不要自定义容器!!!

    代码贴上来以备以后参考

    function datengTest(){
        var dataTest = arguments[0];
        function getPath(data){
            return data.fullpath.substring(0,data.fullpath.length - data.name.length);
        }
        var size = dataTest.length;
        //最顶层目录参考值
        //  var temp = data.fullpath.substring(0,data.fullpath.length - data.name.length);
        var path_cankao = getPath(dataTest[0]);
        //存放子数组起始位置
        var indexs = new Array();
        var result = new Array();
        var start = 0, end =0;
        console.log("参考路径:" + path_cankao);
        
        for (var i=1; i< size;i++){
            var currentPath = getPath(dataTest[i]);
            if (currentPath == path_cankao){
                end = i - 1;
                var mymap = new Map();
                mymap.start = start;
                mymap.end = end;
                indexs.push(mymap);
                start = i;
                end = i;
            }
            if ((i == size - 1)){
                var mymap = new Map();
                mymap.start = start;
                mymap.end = i;
                indexs.push(mymap); 
            }
        }
        if (indexs.length == 0){
            var mymap = new Map();
            mymap.start = start;
            mymap.end = end;
            indexs.push(mymap);
        }
        for (var i = 0; i<indexs.length; i++){
            result.push(dataTest.slice(indexs[i].start,indexs[i].end + 1));
        }
    
        var commentNodes = result.map(function(data) {
            var data2 = data.slice(0,data.length);
            if (data.length > 1){
                data2.shift();
            }
            console.log("data2");
            console.log(data2);
                    
            
            if(data[0].isServiceUnit == 0 && data.length > 1) {
                setAncestorKeys(data[0].id,data[0].pid);
    //          var currentId = data[0].id;
    //          var Pid = data[0].pid;
    //          while(map[currentId] != null){
    //              map[currentId].map(function(data){
    //                  map[data[0].id].push(data);
    //              })
    //              currentId = 
    //          }
                console.log("setId")
                console.log(map)
                var temp = datengTest(data2);
                console.log("temp")
                console.log(temp)
                var realElement = temp.commentNodes;
                return (
                    <SubMenu key={data[0].id} title={<span><Icon type="setting" /><span>{data[0].name}</span></span>}>
                        {realElement}
                    </SubMenu>
                );
            }
            else if(data[0].isServiceUnit == 1 && data.length == 1) {
                return (
                    <Menu.Item key={data[0].id}>{data[0].name}</Menu.Item>
                );
            }
            else if(data[0].isServiceUnit == 0 && data.length == 1){
                setAncestorKeys(data[0].id,data[0].pid);
                console.log("setId")
                console.log(map)
                return (
                    <SubMenu key={data[0].id} title={<span><Icon type="setting" /><span>{data[0].name}</span></span>}>
                    </SubMenu>
                );
            }
        });
        console.log("commentNodes")
        console.log(commentNodes)
        return (
            {commentNodes}
        );
    }
    
    

    然后再去渲染就行了,根据json不同的结构选择不同的递归算法

    相关文章

      网友评论

          本文标题:React递归生成导航树

          本文链接:https://www.haomeiwen.com/subject/izlxnttx.html