一、前言

最近在自己自学前端，不清楚学习路线，只能盯着公司的前端项目硬看。

公司的前端项目是react框架，Ant Design Pro。

之前刚把router.config.js的逻辑理顺，目前准备开发个简单的前端页面。

在此总结下antd中组件的使用方法。

antd组件官网api如下：

https://3x.ant.design/components/tree-cn/

二、个人笔记

1.首先，项目中有一个页面用到了组件，展示样例如下：

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 = ;return result;};render() {return {this.getView()};}

这样，页面就会显示...\项目名\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 ();}

这段的意思是，用antd的框架方法中引入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.回到这个代码， ，其中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是固定的；具体规则可以查看官方文档。（因为组件是框架里的组件，所以后台返回的json报文需要是固定的才行）

7.到此，页面就可以显示树形结构了。

三、其它备注

1.antd中有许多组件，需要查看官网了解使用方法。
2.react项目由于大部分都是js，所以页面加载比vue快些。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！