一、前言
最近在自己自学前端，不清楚学习路线，只能盯着公司的前端项目硬看。
公司的前端项目是react框架，Ant Design Pro。
之前刚把router.config.js的逻辑理顺，目前准备开发个简单的前端页面。
在此总结下antd中<Tree>组件的使用方法。
antd组件官网api如下：
https://3x.ant.design/components/tree-cn/
二、个人笔记
1.首先，项目中有一个页面用到了<Tree>组件，展示样例如下：
2.以本人项目为例，这个页面的入口是http://localhost:8001/MyPage/Mylist，这个url会在router.config.js里配置，映射到页面文件；
{
path: '/MyPage',
name: 'MyPage',
routes: [
{
path: '/MyPage/Mylist',
name: 'Mylist',
component: './Mylist/index',
},
],
}
页面文件路径为...\项目名\src\pages\Mylist\index.jsx
3....\项目名\src\pages\Mylist\index.jsx这个文件中，有这样的一段：
import Home from './home';
getView = () => {
let result = <Home />;
return result;
};
render() {
return <div>{this.getView()}</div>;
}
这样，页面就会显示...\项目名\src\pages\Mylist\home.jsx这个文件里的内容。
4....\项目名\src\pages\Mylist\home.jsx这个文件中，有这样的一段：
import { Card, Col, Input, Row, Tree, Spin } from 'antd';
render() {
const { TrainSet } = this.props;
const { treeData, expandedKeys, autoExpandParent, selectedKeys } = TrainSet;
return (
<Tree
onExpand={this.onExpand}
onSelect={this.onSelect}
expandedKeys={expandedKeys}
selectedKeys={selectedKeys}
autoExpandParent={autoExpandParent}
treeData={treeData}
/>
);
}
这段的意思是，用antd的框架方法中引入Tree，然后下面就可以使用<Tree>组件了；
然后取到const treeData = this.props.TrainSet.treeData，在treeData={treeData}这里显示，就可以让页面展示出树形结构的内容了。
需要注意，<Tree>标签里的内容，都是框架里固定的名字，treeData的内容就是页面树结构展示的内容；详细用法可以看官网。
5.const treeData的内容，是这样取到的：
(1)首先，...\项目名\src\pages\Mylist\home.jsx这个文件中，有这样的一段：
//页面加载完后会调用这个方法
componentDidMount() {
this.onRefesh();
}
onRefesh = () => {
const { dispatch } = this.props;
// 树的内容，给后端发请求获得返回值
dispatch({
type: 'TrainSet/fetchTreeNodes',
queryPara: {},
callback: resp => {
this.generateList(resp);
dispatch({
type: 'OnlineTrainSet/initSearchSet',
searchSet: searchSetList,
});
},
});
};
这段，先获得到const dispatch = this.props.dispatch方法，然后使用这个方法，给后台发请求。
(2)其中，type: 'TrainSet/fetchTreeNodes'的意思是，有个文件...项目名\src\pages\Mylist\models\TrainSet.js，这个文件中有个fetchTreeNodes方法，这个dispatch就会调用这个方法。
(3)fetchTreeNodes方法代码如下：
*fetchTreeNodes({ queryPara, callback }, { call, put }) {
const response = yield call(services.post, '/api/treenodes', queryPara);
if (response) {
yield put({
type: 'updateTreeData',
treeData: response,
queryPara,
});
if (callback) callback(response);
}
},
这个方法就会给后台发post请求，请求的url为./api/treenodes（前缀有配置，例如http://localhost:8001/api/treenodes，这里先不找哪里配置前缀了）；
如果收到了后台响应报文，就会执行yield put({ type: 'updateTreeData', treeData: response, queryPara, });这个方法，这个方法就会把返回报文response放到this.props.TrainSet.treeData里面，后续使用const treeData = this.props.TrainSet.treeData就可以把返回值response拿到了。
需要注意，this.props.TrainSet的意思是，页面叫TrainSet.js；而这个页面里把response用put方法放入treeData里了，所以用this.props.TrainSet.treeData就可以拿到response了。
6.回到这个代码， <Tree onExpand={this.onExpand} onSelect={this.onSelect} expandedKeys={expandedKeys} selectedKeys={selectedKeys} autoExpandParent={autoExpandParent} treeData={treeData} />，其中treeData={treeData}用到的就是后端返回给前端的报文，内容样例如下 ：
[
{
"title": "A",
"label": null,
"value": "6",
"key": "128",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": [
{
"title": "A_A",
"label": null,
"value": "60",
"key": "130",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": [
{
"title": "A_A_A",
"label": null,
"value": "601",
"key": "132",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": []
},
{
"title": "A_A_B",
"label": null,
"value": "600",
"key": "134",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": []
}
]
},
{
"title": "A_B",
"label": null,
"value": "61",
"key": "281",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": [
{
"title": "A_B_A",
"label": null,
"value": "611",
"key": "282",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": []
},
{
"title": "A_B_B",
"label": null,
"value": "610",
"key": "283",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": []
}
]
}
]
},
{
"title": "B",
"label": null,
"value": "n",
"key": "339",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": [
{
"title": "B_A",
"label": null,
"value": "n0",
"key": "340",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": [
{
"title": "B_A_A",
"label": null,
"value": "n01",
"key": "341",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": [
{
"title": "B_A_A_A",
"label": null,
"value": "n010",
"key": "343",
"param1": null,
"param2": null,
"param3": null,
"param4": null,
"param5": null,
"param6": null,
"param7": null,
"param8": null,
"param9": null,
"pvalue": null,
"text": null,
"type": null,
"disabled": false,
"state": null,
"children": []
}
]
}
]
}
]
}
]
注意，这段json就是树形结构的，key是固定的；具体规则可以查看官方文档。（因为<Tree>组件是框架里的组件，所以后台返回的json报文需要是固定的才行）
7.到此，页面就可以显示树形结构了。
三、其它备注
1.antd中有许多组件，需要查看官网了解使用方法。
2.react项目由于大部分都是js，所以页面加载比vue快些。