js -- js之遞歸渲染樹形結構

有些剛畢業的不大知道，到底如何寫樹菜單、無限層級渲染、以及如何用vue實現

vue如何實現先等下說

js裏面的話，反正都是遞歸，可是直接說遞歸，可能會懵逼。

好比如何渲染呢。 咱們先實現下js輸入html。

var o = [
{
value: '我是一級', 
children: [{value: '我是1.1'}]
},
{
value: '我是二級', 
children: [{value: '我2.1'}, {value: '我2.2',children: [{value: '我是2.2.1'}] }]
},
]

var loop = (o) => {
    return o.map(e => {
        return e.children ?
			`<div>
				<div>${e.value}</div>
				<ul>
					<li style="padding-left: 20px">${loop(e.children)}</li>
				</ul>
			</div>
			`
		: e.value
    })
}
var html = loop(o).join('')

document.body.innerHTML = html
複製代碼

跑下代碼 長這樣

原理就是利用一個循環函數（遞歸），遇到下子菜單有值的時候，再次調用本身。

簡單就是遇到有下一個層級的時候就循環獲取值，而後return出去值。而具體寫法通常都是寫一個函數本身調用。

---

說到這裏，我就知道如何寫了，至少沒有任何框架的時候能夠直接用。

那麼vue的關係就是，用模板，而後生成一個字符串，這個字符串就是html。 好比jsp、vue、react、xxx模板、都是這樣的原理。

因此 直接 v-html就能夠綁定上去了。

可是這時候就會丟失vue模板的特性，好比沒有雙向數據綁定，更新值得時候須要調用更新函數。（其實我以爲還好，就好比react和小程序也要調用setData函數從新渲染）

比較優雅一點就能夠寫jsx

代碼能夠改爲這樣

var o = [
{
value: '我是一級', 
children: [{value: '我是1.1'}]
},
{
value: '我是二級', 
children: [{value: '我2.1'}, {value: '我2.2',children: [{value: '我是2.2.1'}] }]
},
]

var loop = (o) => {
    return o.map(e => {
        return e.children ?
            (<div>
                <div>{{e.value}}</div>
                <ul>
                    <li style="padding-left: 20px">{{loop(e.children)}}</li>
                </ul>
            </div>
            )
        : <div>{{e.value}}</div>
    })
}
複製代碼

(這個代碼直接在文章編輯裏面寫，沒有運行)

具體代碼的話也能夠參考我得一個開源代碼： [drawing_panel.tsx)

那麼有些小夥伴會問 vue有jsx麼。 嗯。 也支持。

配置傳送門： 渲染函數 & JSX

--END--