Wenzi

实现react组件的递归调用

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

项目中有侧边栏的层级菜单或者需要根据接口生成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>
标签:react
阅读(7023)
Simple Empty
No data