tree数据结构
{
“title”:“我喜欢的明星”,
“children”:[
{
“title”:“杨幂”,
“children”:[
]
},
{
“title”:“古力娜扎”,
“children”:[
]
},
{
“title”:“迪丽热巴”,
“children”:[
]
},
{
“title”:“不喜欢的明星”,
“children”:[
{
“title”:“马蓉”,
“children”:[
]
}
]
}
]
},
{
“title”:“三国有哪些英雄”,
“children”:[
{
“title”:“吕布”,
“children”:[
{
“title”:“温侯”,
“children”:[
{
“title”:“刘备的妻子有哪些”,
“children”:[
{
“title”:“貂蝉”,
“children”:[
]
},
{
"title":"严夫人",
"children":[
]
}
]
}
]
}
]
},
{
"title":"刘备",
"children":[
{
"title":"玄德",
"children":[
{
"title":"刘备的妻子有哪些",
"children":[
{
"title":"甘倩",
"children":[
]
},
{
"title":"糜夫人",
"children":[
]
},
{
"title":"孙仁",
"children":[
]
},
{
"title":"吴夫人",
"children":[
]
},
]
}
]
}
]
},
{
"title":"关羽",
"children":[
{
"title":"云长",
"children":[
{
"title":"关羽的妻子有哪些",
"children":[
]
}
]
}
]
},
{
"title":"张飞",
"children":[
{
"title":"翼德",
"children":[
{
"title":"张飞的妻子有哪些",
"children":[
{
"title":"夏侯夫人",
"children":[
]
}
]
}
]
}
]
}
]
}
js实现方法
js实现的效果
首先是把这个数组获取到，之后先把他的第一级循环出来，然后判断数组下每个对象里面还有没有children，有的话就递归调用传入这个有的数组，没有就返回null，过程很简单，就是函数自己调用自己
react实现过程
react实现的效果数据是从后台获取的，所以展示的效果不太一样，但是数据结构都是一样的
react和js实现的原理都是一样的，先是把数据给传给函数，之后先把他的父级给循环出来，之后判断父级里面有没有数组childs，有就递归调用，没有就返回空，之后函数返回dom元素，只是写法不一样，只要知道这个递归调用的意思，就没什么难度。希望能帮到各位同行遇到的这个问题