React ant-design 动态目录

引言

我最近在使用react写web前端，React UI组件库是使用Ant Design。
我做的项目的一个需求是：在网页上渲染动态目录，即实时响应后端的目录变化。我使用的是antd的树形控件Tree来展示目录的组织架构，层级关系。同时树形控件，自带了展开收起选择等交互功能。

效果

从后端获取共有两级目录，其中00-MNIST、01-CIFAR10是第一级目录。目前选中00-MNIST下的01_hw，点击∨可以收起目录：

同时，后端如果按照约定的标准格式增删改了目录，前端会实时对应渲染。

实现

下面的实现只是思路以及核心代码，全部代码可移步Github。

1. class的render()函数：

    render() {
       return [
         <Row className='outline-tree-menu'>
           <Tree
             className="treeMenu"
             showLine
             switcherIcon={<DownOutlined />}  #展开icon