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元素，只是寫法不一樣，只要知道這個遞歸調用的意思，就沒什么難度。希望能幫到各位同行遇到的這個問題

總結

以上是生活随笔為你收集整理的react和js递归遍历树形结构数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。