从数据制作树状视图

Question

我有关于文件夹及其子文件夹的数据。我的问题是我不知道如何制作嵌套的子文件夹，例如，我有一个包含文件夹的数组。我有一个文件夹“ test”，其中包含子文件夹标签数组，还有一个文件夹“ daamn”，在“ daamn”内部还有其他子文件夹。但是，“ daamn”子文件夹不在第二个数组中，而是在第一个数组中。

[
  {
    "path": ".TemporaryItems",
    "label": ".TemporaryItems",
    "rec": false
  },
  {
    "path": "1",
    "label": "1",
    "rec": false
  },
  {
    "path": "test/",
    "label": "test",
    "rec": true,
    "subDirectories": [
      {
        "name": "daamn",
        "isDir": true,
        "isEmpty": false
      },
      {
        "name": "New folder",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (2)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (3)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (4)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (5)",
        "isDir": true,
        "isEmpty": true
      }
    ]
  },
  {
    "path": "test/daamn/",
    "label": "daamn",
    "rec": true,
    "subDirectories": [
      {
        "name": "anotherone",
        "isDir": true,
        "isEmpty": false
      }
    ]
  },
  {
    "path": "test/daamn/anotherone/",
    "label": "anotherone",
    "rec": true,
    "subDirectories": [
      {
        "name": "vade",
        "isDir": true,
        "isEmpty": true
      }
    ]
  },
  {
    "path": "test/daamn/anotherone/vade",
    "label": "vade",
    "rec": false
  },
  {
    "path": "test/New folder",
    "label": "New folder",
    "rec": false
  },
  {
    "path": "test/New folder (2)",
    "label": "New folder (2)",
    "rec": false
  },
  {
    "path": "test/New folder (3)",
    "label": "New folder (3)",
    "rec": false
  },
  {
    "path": "test/New folder (4)",
    "label": "New folder (4)",
    "rec": false
  },
  {
    "path": "test/New folder (5)",
    "label": "New folder (5)",
    "rec": false
  }
]

“ rec”标志表示是否存在其他子文件夹。

作为预期的输出，我需要一个DOM（实际上只是一个包含<ul>和<li>的列表）。像这样的东西，对不起

Answer 1

我发现react-ui-tree可以调用/* I've defined a generic delay function as replacement for t1 - t5 functions to minimise the amount of code */ function delay(seconds) { /* Return a promise object that will cause the await to prevent main() async function's execution from continuing until this promise has resolved */ return (new Promise((resolve) => { /* Inside the promise, set your time out */ setTimeout(() => { console.log(seconds) /* When time out complete, call resolve(), which resolves this promise and allows main() async function's execution to continue */ resolve() }, seconds * 1000); })) } async function main() { await delay(1); console.log("1sec done"); await delay(2); console.log("2sec done"); await delay(3); console.log("3sec done"); await delay(4); console.log("4sec done"); await delay(5); console.log("Yay! I am all done"); } main();来呈现自定义的React Element。

renderNode

Answer 2

我使用递归来重建树，因为子文件夹是父文件夹的子文件夹。

const arr = [
  {
    "path": ".TemporaryItems",
    "label": ".TemporaryItems",
    "rec": false
  },
  {
    "path": "1",
    "label": "1",
    "rec": false
  },
  {
    "path": "test/",
    "label": "test",
    "rec": true,
    "subDirectories": [
      {
        "name": "daamn",
        "isDir": true,
        "isEmpty": false
      },
      {
        "name": "New folder",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (2)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (3)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (4)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (5)",
        "isDir": true,
        "isEmpty": true
      }
    ]
  },
  {
    "path": "test/daamn/",
    "label": "daamn",
    "rec": true,
    "subDirectories": [
      {
        "name": "anotherone",
        "isDir": true,
        "isEmpty": false
      }
    ]
  },
  {
    "path": "test/daamn/anotherone/",
    "label": "anotherone",
    "rec": true,
    "subDirectories": [
      {
        "name": "vade",
        "isDir": true,
        "isEmpty": true
      }
    ]
  },
  {
    "path": "test/daamn/anotherone/vade",
    "label": "vade",
    "rec": false
  },
  {
    "path": "test/New folder",
    "label": "New folder",
    "rec": false
  },
  {
    "path": "test/New folder (2)",
    "label": "New folder (2)",
    "rec": false
  },
  {
    "path": "test/New folder (3)",
    "label": "New folder (3)",
    "rec": false
  },
  {
    "path": "test/New folder (4)",
    "label": "New folder (4)",
    "rec": false
  },
  {
    "path": "test/New folder (5)",
    "label": "New folder (5)",
    "rec": false
  }
]

const folrLvl = str => str.split('/').filter(e => e !== "").length

function recursion(lvl = 1, path) {
    const rs = [] 
    const matched = arr.filter(e => 
      folrLvl(e.path) === lvl && (!path || e.path.indexOf(path) === 0))
    matched.forEach(ee => {
      const { path, rec, label } = ee
      if(!rec) rs.push(ee)
      else rs.push({path, label, rec, children: recursion(lvl + 1, path)})
    })
    return rs
}

const rs = recursion()
console.log(rs)