实现react组件的递归调用

项目中有侧边栏的层级菜单或者需要根据接口生成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>