javascript - 从数据创建 TreeView

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您可以在其中调用 renderNode 以呈现自定义 React 元素。

<Tree
 paddingLeft={20}              // left padding for children nodes in pixels
 tree={this.state.tree}        // tree object
 onChange={this.handleChange}  // onChange(tree) tree object changed
 renderNode={this.renderNode}  // renderNode(node) return react element
/>