实现react组件的递归调用

蚊子前端博客
发布于 2019-05-12 00:14
项目中有侧边栏的层级菜单或者需要根据接口生成DOM树等操作时,如何实现组件的递归调用呢?

项目中有侧边栏的层级菜单或者需要根据接口生成DOM树等操作时,这里就需要用到了组件的递归调用。

在本篇文章里,我们使用React来简单实现下组件的递归。在React可以通过props和children来向子组件传递信息,不过在这里大致的思路都是一样的。我们先定义一下要渲染的json结构:

COPYJAVASCRIPT

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组件可以这样实现:

COPYJSX

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组件:

COPYJSX

<Item>{this.list}</Item>
标签:
阅读(4250) 评论(0)

公众号:

qrcode

微信公众号:前端小茶馆