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--