YApi 接口多级目录改造

render(){
    ...
    ...

const loop = data => data.map((item) => {
  // if (item.list && item.list.length >= 0) {
  if (item.itemType === 'cat') { // 一级目录
    return (
      <TreeNode 
        title={
          <div
            className="container-title"
            onMouseEnter={() => this.enterItem(item._id)}
            onMouseLeave={this.leaveItem}
          >
            <Link
              className="interface-item"
              onClick={e => {
                e.stopPropagation();
                this.changeExpands();
              }}
              to={'/project/' + matchParams.id + '/interface/api/cat_' + item._id}
            >
              <Icon type="folder-open" style={{ marginRight: 5 }} />
              {item.name || item.title}
            </Link>
            <div className="btns">
              <Tooltip title="删除分类">
                <Icon
                  type="delete"
                  className="interface-delete-icon"
                  onClick={e => {
                    e.stopPropagation();
                    this.showDelCatConfirm(item._id);
                  }}
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                />
              </Tooltip>
              <Tooltip title="修改分类">
                <Icon
                  type="edit"
                  className="interface-delete-icon"
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                  onClick={e => {
                    e.stopPropagation();
                    this.changeModal('change_cat_modal_visible', true);
                    this.setState({
                      curCatdata: item
                    });
                  }}
                />
              </Tooltip>
              <Tooltip title="添加接口">
                <Icon
                  type="plus"
                  className="interface-delete-icon"
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                  onClick={e => {
                    e.stopPropagation();
                    this.changeModal('visible', true);
                    this.setState({
                      curCatid: item._id,
                      parentid: null
                    });
                  }}
                />
              </Tooltip>
              <Tooltip title="创建目录">
                <Icon
                  type="folder"
                  className="interface-delete-icon"
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                  onClick={e => {
                    e.stopPropagation();
                    this.changeModal('add_folder_modal_visible', true);
                    this.setState({
                      curCatid: item._id,
                      parentid: null
                    });
                  }}
                />
              </Tooltip>
              <Tooltip title="创建文档">
                <Icon
                  type="file"
                  className="interface-delete-icon"
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                  onClick={e => {
                    e.stopPropagation();
                    this.changeModal('add_file_modal_visible', true);
                    this.setState({
                      curCatid: item._id,
                      parentid: null
                    });
                  }}
                />
              </Tooltip>
            </div>
          </div>
        }
        key={'cat_' + item._id}
        className={`interface-item-nav1`} 
        isLeaf={true}
        autoExpandParent
      >
        {loop(item.list)}
      </TreeNode>)
  } else if(item.record_type === 2) { //文件夹类型
    return (
      <TreeNode
        className={`interface-item-nav2`}
        title={
          <div
            className="container-title"
            onMouseEnter={() => this.enterItem(item._id)}
            onMouseLeave={this.leaveItem}
          >
            <div className="interface-item" onClick={e => e.stopPropagation()}>
              <Icon type="folder-open" style={{ marginRight: 5 }} />
              {item.title || item.name}
            </div>
            <div className="btns">
              <Tooltip title="删除">
                <Icon
                  type="delete"
                  className="interface-delete-icon"
                  onClick={e => {
                    e.stopPropagation();
                    this.showConfirm(item);
                  }}
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                />
              </Tooltip>
              <Tooltip title="修改目录">
                <Icon
                  type="edit"
                  className="interface-delete-icon"
                  onClick={e => {
                    e.stopPropagation();
                    this.changeModal('change_dir_modal_visible', true);
                    this.setState({
                      curDirData: item
                    });
                  }}
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                />
              </Tooltip>
              <Tooltip title="创建目录">
                <Icon
                  type="folder"
                  className="interface-delete-icon"
                  onClick={e => {
                    e.stopPropagation();
                    this.changeModal('add_folder_modal_visible', true);
                    this.setState({
                      curCatid: item.catid,
                      curParentId: item._id
                    });
                  }}
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                />
              </Tooltip>
              <Tooltip title="创建接口">
                <Icon
                  type="plus"
                  className="interface-delete-icon"
                  onClick={e => {
                    e.stopPropagation();
                    this.changeModal('visible', true);
                    this.setState({
                      curCatid: item.catid,
                      curParentId: item._id
                    });
                  }}
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                />
              </Tooltip>
              <Tooltip title="创建文档">
                <Icon
                  type="file"
                  className="interface-delete-icon"
                  onClick={e => {
                    e.stopPropagation();
                    this.changeModal('add_file_modal_visible', true);
                    this.setState({
                      curCatid: item.catid,
                      curParentId: item._id
                    });
                  }}
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                />
              </Tooltip>
            </div>
          </div>
        }
        key={'cat_' + item._id}
        isLeaf={true}
        autoExpandParent
      >
        {item.list && loop(item.list)}
      </TreeNode>)
  } else {
    return ( //文档 api类型
      <TreeNode
        className={`interface-item-nav3`}
        title={
          <div
            className="container-title"
            onMouseEnter={() => this.enterItem(item._id)}
            onMouseLeave={this.leaveItem}
          >
            <Link
              className="interface-item"
              onClick={e => {
                e.stopPropagation();
                this.changeExpands();
              }}
              to={'/project/' + matchParams.id + '/interface/api/' + item._id}
            >
              {item.record_type == 0 ? (<Icon type={item.interface_type === 'http' ? 'api' : 'code'} style={{ marginRight: 5 }} />) : ('')}
              {item.record_type == 1 ? (<Icon type="file-text" style={{ marginRight: 5 }} />) : ('')}
              {item.title || item.name}
            </Link>
            <div className="btns">
              <Tooltip title="删除">
                <Icon
                  type="delete"
                  className="interface-delete-icon"
                  onClick={e => {
                    e.stopPropagation();
                    this.showConfirm(item);
                  }}
                  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                />
              </Tooltip>
              {item.record_type === 0 ? (
                <Tooltip title="复制接口">
                  <Icon
                    type="copy"
                    className="interface-delete-icon"
                    onClick={e => {
                      e.stopPropagation();
                      this.copyInterface(item._id);
                    }}
                    style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
                  />
                </Tooltip>
                ) : ('')
              }
            </div>
          </div>
        }
        key={'' + item._id}
        isLeaf={true}
        autoExpandParent
      />)
  }

})





return(


。。。




。。。


            <Tree
              className="interface-list"
              defaultExpandedKeys={currentKes.expands}
              defaultSelectedKeys={currentKes.selects}
              //expandedKeys={currentKes.expands}
              selectedKeys={currentKes.selects}
              onSelect={this.onSelect}
              onExpand={this.onExpand}
              draggable
              onDrop={this.onDrop}
              autoExpandParent
            >
              <TreeNode
                className="item-all-interface"
                title={
                  <Link
                    onClick={e => {
                      e.stopPropagation();
                      this.changeExpands();
                    }}
                    to={'/project/' + matchParams.id + '/interface/api'}
                  >
                    <Icon type="folder" style={{ marginRight: 5 }} />
                    全部接口
                  </Link>
                }
                key="root"
              />
              {loop(menuList)}
            </Tree>


)

}