antd YApi 使用Tree组件改造API目录 (二级目录改造成无限级)

import React, { Component } from 'react'
import { Tree,Icon } from 'antd';
import axios from 'axios';
const { TreeNode } = Tree;


export default class Tree3 extends Component {
  state = {
    gData:[],
    expandedKeys: [],
  }
  componentDidMount(){
    axios.get('http://10.26.21.83:3000/mock/91/openapi/doc/queryMenu').then(res=>{
      console.log(res.data)
      this.setState({
        gData:res.data.data
      })
    })
  }

  render() {
    let d = this.state.gData
    const loop = data => data.map((item) => {
      if (item.itemType === 'cat') { //一级目录
        return {loop(item.list)};
      }else if(item.record_type === 2) { //文件夹类型
        return  (
          
                
e.stopPropagation()}> {item.title || item.name}
} key={'cat_' + item._id} > {item.list && loop(item.list)} ) }else{ return ( //文档 api类型 {item.title || item.name}
} key={'' + item._id} />); } }); return ( {loop(d)} ); } }

数据结构:

{
  "errcode": 0,
  "errmsg": "成功!",
  "data": [
    {
      "index": 0,
      "_id": 97,
      "name": "公共分类",
      "project_id": 15,
      "desc": "公共分类",
      "uid": 11,
      "add_time": 1557311308,
      "up_time": 1557311308,
      "__v": 0,
      "itemType": "cat",
      "list": [
        {
          "edit_uid": 0,
          "status": "undone",
          "parent_id": null,
          "record_type": 0,
          "interface_type": "dubbo",
          "index": 0,
          "tag": [],
          "_id": 192,
          "catid": 97,
          "title": "getRoleHouseInfos",
          "r_facade": "com.lianjia.mls.datakeeper.housedel.facade.search.customer.Search4CustomerFacade",
          "r_method": "getRoleHouseInfos",
          "method": "GET",
          "project_id": 15,
          "uid": 11,
          "add_time": 1557372229,
          "up_time": 1557372229,
          "list": []
        },
        {
          "edit_uid": 0,
          "status": "undone",
          "parent_id": null,
          "record_type": 0,
          "interface_type": "http",
          "index": 1,
          "tag": [],
          "_id": 211,
          "method": "GET",
          "catid": 97,
          "title": "menu",
          "path": "/api/interface/list_menu",
          "project_id": 15,
          "uid": 11,
          "add_time": 1557390072,
          "up_time": 1557397650,
          "list": []
        },
        {
          "edit_uid": 11,
          "status": "undone",
          "parent_id": null,
          "record_type": 1,
          "interface_type": "http",
          "index": 1,
          "tag": [],
          "_id": 220,
          "title": "wiki目录",
          "catid": 97,
          "project_id": 15,
          "uid": 11,
          "add_time": 1557456457,
          "up_time": 1557457632,
          "list": []
        },
        {
          "edit_uid": 0,
          "status": "undone",
          "parent_id": null,
          "record_type": 2,
          "interface_type": "http",
          "index": 3,
          "tag": [],
          "_id": 271,
          "title": "tree2",
          "catid": 97,
          "project_id": 15,
          "uid": 11,
          "add_time": 1557900913,
          "up_time": 1557900913,
          "list": [
            {
              "edit_uid": 0,
              "status": "undone",
              "parent_id": "271",
              "record_type": 0,
              "interface_type": "http",
              "api_opened": false,
              "index": 0,
              "tag": [],
              "_id": 278,
              "method": "GET",
              "catid": 97,
              "title": "更新或插入接口的富文本2",
              "path": "/openapi/doc/queryAllTabs2",
              "project_id": 15,
              "uid": 11,
              "add_time": 1557900943,
              "up_time": 1557900943
            }
          ]
        },
        {
          "edit_uid": 0,
          "status": "undone",
          "parent_id": null,
          "record_type": 2,
          "interface_type": "http",
          "index": 4,
          "tag": [],
          "_id": 190,
          "title": "tree",
          "catid": 97,
          "project_id": 15,
          "uid": 11,
          "add_time": 1557370827,
          "up_time": 1557370827,
          "list": [
            {
              "edit_uid": 0,
              "status": "undone",
              "parent_id": "190",
              "record_type": 0,
              "interface_type": "http",
              "api_opened": false,
              "index": 0,
              "tag": [],
              "_id": 191,
              "method": "GET",
              "catid": 97,
              "title": "更新或插入接口的富文本",
              "path": "/openapi/doc/insertOrUpdateApiText",
              "project_id": 15,
              "uid": 11,
              "add_time": 1557370838,
              "up_time": 1557370838
            },
            {
              "edit_uid": 0,
              "status": "undone",
              "parent_id": "190",
              "record_type": 1,
              "interface_type": "http",
              "api_opened": false,
              "index": 2,
              "tag": [],
              "_id": 193,
              "title": "tree2",
              "catid": 97,
              "project_id": 15,
              "uid": 11,
              "add_time": 1557373422,
              "up_time": 1557818144
            },
            {
              "edit_uid": 0,
              "status": "undone",
              "parent_id": "190",
              "record_type": 2,
              "interface_type": "http",
              "api_opened": false,
              "index": 3,
              "tag": [],
              "_id": 285,
              "title": "treeChild2",
              "catid": 97,
              "project_id": 15,
              "uid": 11,
              "add_time": 1557900967,
              "up_time": 1557900967,
              "list": [
                {
                  "edit_uid": 0,
                  "status": "undone",
                  "parent_id": "285",
                  "record_type": 1,
                  "interface_type": "http",
                  "api_opened": false,
                  "index": 0,
                  "tag": [],
                  "_id": 292,
                  "title": "h3目录",
                  "catid": 97,
                  "project_id": 15,
                  "uid": 11,
                  "add_time": 1557902644,
                  "up_time": 1557902644
                }
              ]
            }
          ]
        },
        {
          "edit_uid": 0,
          "status": "undone",
          "parent_id": null,
          "record_type": 0,
          "interface_type": "http",
          "index": 5,
          "tag": [],
          "_id": 189,
          "method": "GET",
          "catid": 97,
          "title": "创建目录",
          "path": "/api/interface/add",
          "project_id": 15,
          "uid": 11,
          "add_time": 1557370124,
          "up_time": 1557370124,
          "list": []
        }
      ]
    }
  ]
}

结果:

antd YApi 使用Tree组件改造API目录 (二级目录改造成无限级)_第1张图片

你可能感兴趣的:(js)