#React#递归嵌套组件调用

项目中有侧边栏的层级菜单或者需要根据接口生成DOM树等操作时，如何实现组件的递归调用呢？

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

使用React来简单实现下组件的递归。在React可以通过props和children来向子组件传递信息

数据结构：

子组件：

render() {
  const list: any = this.props.children || {}
  return (
    <div className={styles.treeSelectBox}>
      {
        list.map((item, index: number) => {
          return <React.Fragment key={item.id}>
            <div className={styles.itemBox}>
              <div className={styles.itemLeft}>
                {item.name}
              </div>
              <Checkbox
                onChange={e => this.onChange(e, item, index)}
                className={styles.checkBox}
                style={{ display: item.checkout ? 'block' : '' }} />
            </div>
            {
              item.children && item.children.length ? <TreeSelect >{item.children}</TreeSelect> : null
            }
          </React.Fragment>
        })
      }
    </div>
  )
}

 

父组件调用：

<TreeSelect>{this.state.newPageList}</TreeSelect>

 

结果：