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