前面学会了antd的使用步骤，现在要使用一下Tree树形控件，话不多说，继续记录....
写这些，其实最重要的是提醒自己，凡是前端技术，认真看好文档教程，加上自己的思考尝试，差不多就成功了一半了，千万不要从入门到放弃哦。准备下一个项目，开始使用react框架，让自己能够一边开发，一边熟悉。
1：首先生成一个空组件模板
import React, { Component } from 'react'; class Treetest extends Component { constructor(props) { super(props); //react定义数据 this.state = { } } render() { return ( <div> <h2>我是Tree树形控件</h2> </div> ) } } export default Treetest;
2：在空组件里面引入Tree树形控件要用到的组件
import { Tree } from 'antd'; const { TreeNode } = Tree;
3：参考antd文档：关于Tree树形控件的相关，重要的话说三遍...
https://ant.design/components/tree-cn/
4： render()内容
从文档里面找到相关内容，ctrl c + ctrl v
5：参考代码如下
import React, { Component } from 'react'; import { Tree } from 'antd'; const { TreeNode } = Tree; class Treetest extends Component { constructor(props) { super(props); //react定义数据 this.state = { } } render() { return ( <Tree checkable defaultExpandedKeys={['0-0-0', '0-0-1']} defaultSelectedKeys={['0-0-0', '0-0-1']} defaultCheckedKeys={['0-0-0', '0-0-1']} onSelect={this.onSelect} onCheck={this.onCheck} > <TreeNode title="parent 1" key="0-0"> <TreeNode title="parent 1-0" key="0-0-0" disabled> <TreeNode title="leaf" key="0-0-0-0" disableCheckbox /> <TreeNode title="leaf" key="0-0-0-1" /> </TreeNode> <TreeNode title="parent 1-1" key="0-0-1"> <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" /> </TreeNode> </TreeNode> </Tree> ); } } export default Treetest;
实现效果，一个Tree树形控件就出现啦，现在要把这个用在项目里面啦，选择自己喜欢的样式，添加上去，就搞定啦。
