react antd(0.11v) 渲染树形结构

1.自己写div 和 p

createTree(subMenu){
        return (<div>
            {subMenu.map((v,i)=>{
                if(v.subMenu && v.subMenu.length>0){
                    return <p>
                        <p>{v.name}</p>
                        <p>{this.createTree(v.subMenu)}</p>
                    </p>
                }else{
                    return <p>{v.name}</p>
                }
            })}
        </div>)
    }
render(){
	return (
		<div>
			{this.createTree(this.state.subMenu)}
		</div>
	)
}

2.用Menu组件

renderIcon(state){
        if(state==='1'){
            return <Icon type="folder-open" />
        }else if(state==='2'){
            return <Icon type="folder" />
        }else if(state==='3'){
            return <Icon type="file-text" />
        }
    }
createMenu(subMenu){
        return (
            subMenu.map((v,i)=>{
                if(v.subMenu && v.subMenu.length>0){
                    return <SubMenu key={v.id} title={<span>{this.renderIcon(v.state)}<span>{v.name}</span></span>}>
                        {this.createMenu(v.subMenu)}
                    </SubMenu>
                }else{
                    return <Menu.Item key={v.id}>{this.renderIcon(v.state)}{v.name}</Menu.Item>
                }
            })
        )
    }

render(){
	return (
		<div>
			<Menu mode="inline">
                    {this.createMenu(this.state.subMenu)}
                </Menu>
		</div>
	)
}

3.Tree组件

createTreeNode(subMenu){
        return (
            subMenu.map((v,i)=>{
                if(v.subMenu && v.subMenu.length>0){
                    return <TreeNode title={v.name} key={v.id}>{this.createTreeNode(v.subMenu)}</TreeNode>
                }else{
                    return <TreeNode title={v.name} key={v.id}/>
                }
            })
        )
    }

render(){
        return (
            <div>
                
                <Tree defaultExpandAll={true}>
                    {this.createTreeNode(this.state.subMenu)}
                </Tree>
            </div>
        )
    }