dva+antd完成tree

dva项目下完成tree的展示

参考antd文档 https://ant.design/components/tree-cn/

import { Tree } from 'antd';
import { Modal } from 'antd';
import React from 'react';
import { connect } from 'dva';
import axios from 'axios';
const TreeNode = Tree.TreeNode;
const confirm = Modal.confirm;



class AAAA extends React.Component {
    //遍历json绘制出tree结构
    mapData = (children) => {
        if (children && Array.isArray(children)) {
            return children.map((ele) => {
                if (ele.children && Array.isArray(ele.children)) {
                    return <TreeNode title={ele.name} key={ele.value} isLeaf={ele.isFile} url={ele.url}>
                        {this.mapData(ele.children)}
                    </TreeNode>
                } else {
                    return <TreeNode title={ele.name} key={ele.value} isLeaf={ele.isFile} url={ele.url}/>
                }
            })
        }
        return []
    }

	
	
//构造器加入data
constructor(props) {
    super(props);
    this.state = {
        data: [] //先空着
    }
}


//获取数据
componentDidMount() {
	 console.log("构造函数加载完成后，会加载componentWillMount(组件将要挂载)----2")
    axios.get('http://localhost:8000/api/tree')
      .then(res => {
        const data = res.data;
        this.setState({ data });
		 console.log( this.state.data)
      });
  }




	onSelect = (selectedKeys, info) => {
		console.log('selected', selectedKeys);
		//alert(selectedKeys[0])
		let isLeaf=info.node.props.isLeaf;
		if(isLeaf){
			let url=info.node.props.url;
			confirm({
				title: '确定下载脚本文件?',
				content: '确认框',
				okText:'确认',
				cancelText:'取消',
				onOk() {
				  alert("下载"+url)
				},
				onCancel() {
				  console.log('Cancel');
				},
			});						
		}
  }
  

    render() {
		var data = this.state.data; //记得定义
        let content = []
        let {name, children} = data
		console.log(data);
        if (name) {
            content.push(<TreeNode title={name} key="/">{this.mapData(children)}</TreeNode>)
        }
        return (
		  <Tree  showLine defaultExpandAll  onSelect={this.onSelect}    >
               {content}
            </Tree>
        );
    }
	
	  
}

export default connect()(AAAA)

请求接口 http://localhost:8000/api/tree可参考https://blog.csdn.net/yjaspire/article/details/90180226