antd中Tree组件使用方法个人笔记

墨蓝 2024-03-29 14:31 65阅读 0赞

## 一、前言 ##

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

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

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

在此总结下antd中`<Tree>`组件的使用方法。

antd组件官网api如下：

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

## 二、个人笔记 ##

1.首先，项目中有一个页面用到了`<Tree>`组件，展示样例如下：  
![在这里插入图片描述][eef946562b334264a559af5328ba241f.png]  
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快些。

[eef946562b334264a559af5328ba241f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/9e7219c7fbf043ba95a0c31f6a64be29.png