项目中有侧边栏的层级菜单或者需要根据接口生成DOM树等操作时,这里就需要用到了组件的递归调用。
在本篇文章里,我们使用React来简单实现下组件的递归。在React可以通过props和children来向子组件传递信息,不过在这里大致的思路都是一样的。我们先定义一下要渲染的json结构:
list = [
{
name: '1',
children: [
{
name: '1-1'
},
{
name: '1-2',
children: [
{
name: '1-2-1'
}
]
},
{
name: '1-3'
}
]
},
{
name: '2',
children: [
{
name: '2-1'
}
]
}
]
我们的Item组件可以这样实现:
render() {
const list: any = this.props.children || [];
return (
<div className="item">
{
list.map((item: ItemData, index: number) => {
return <React.Fragment key={index}>
<h3>{item.name}</h3>
{
// 当该节点还有children时,则递归调用本身
item.children && item.children.length ?
<Item>{item.children}</Item> : null
}
</React.Fragment>
})
}
</div>
)
}
最后调用这个Item组件:
<Item>{this.list}</Item>