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<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不同的结构选择不同的递归算法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容