React递归生成导航树

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

首先要构造一个虚拟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 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 (
                {data[0].name}}>
                    {realElement}
                
            );
        }
        else if(data[0].isServiceUnit == 1 && data.length == 1) {
            return (
                {data[0].name}
            );
        }
        else if(data[0].isServiceUnit == 0 && data.length == 1){
            setAncestorKeys(data[0].id,data[0].pid);
            console.log("setId")
            console.log(map)
            return (
                {data[0].name}}>
                
            );
        }
    });
    console.log("commentNodes")
    console.log(commentNodes)
    return (
        {commentNodes}
    );
}

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

你可能感兴趣的:(React递归生成导航树)