antd+js 目录树实现

antd 目录树实现

话不说多 先看图

首先我们这里是要在项目内做一个编辑器功能。做编辑器目录树就必不可少。如何根据多维数组作出自己想要的目录结构，请看下面代码

const data = [
    {
        catalog：'目录一'，
        isDirectory：true
          child:[
              {
                  childCatalog:'子目录一'，
                  isDirectory：true
                  childChild:[...里面可能还有很多]
              },
              {
                  childCatalog:'子目录二'，
                  isDirectory：trueÏ
              },
          ]  
    },
    
    {
        catalog：'目录二'，
        isDirectory：false
    }
]
//大致数据结构如上
    function forList(data) {
        let showView = []
        for (let i in data) {
            if (data[i].isDirectory && data[i].childs) {
                //是目录 并且有子目录
                let obj =
                    <SubMenu key={'one' + data[i].name} title={data[i].name} 
                    draggable="true"
                    onContextMenu={() => {
                        onContextMenuClick(data[i])
                    }}>
                        {forList(data[i].childs)}
                    </SubMenu>
                showView.push(obj)

            } else if (!data[i].isDirectory) {
                //是文件

                let obj = <Menu.Item key={'file' + data[i].name} onClick={() => { onMenuClick(data[i]) }}>{data[i].name}</Menu.Item>
                showView.push(obj)
            } else {
                //是目录，但是没子目录

                let obj = <SubMenu key={'fileno' + data[i].name} title={data[i].name}>
                </SubMenu>
                showView.push(obj)
            }
        }
        return showView
    }