操作嵌套数据结构答案

【问题标题】：Manipulating Nested data structure操作嵌套数据结构
【发布时间】：2020-10-14 09:43:00
【问题描述】：

我正在开发一个处理标签和子标签的组件。我已经弄清楚了数据结构（我认为）以及如何使用现有数据呈现组件。

示例：https://codesandbox.io/s/nested-labels-7vfkb?file=/example.js:292-330

但是，我完全坚持我应该如何处理数据。

例如，我需要能够上下重新排列行。我需要能够删除特定行及其所有子项，我需要添加到子项等。

我不完全确定如何跟踪数据结构中的每一行位置以执行这些操作。我不想依赖标签文本，因为文本可以匹配。

我假设在渲染组件时，我可以将一些关于定位的信息附加到删除/添加/向上和向下按钮，只是不确定具体是什么或如何。

数据如下所示：

[
  {
    label: "Label: 1",
    children: [
      {
        label: "Label: 1.1",
        children: [
          {
            label: "Label: 1.1.1",
            children: [{ label: "Label: 1.1.2" }, { label: "Label: 1.1.3" }]
          }
        ]
      }
    ]
  }]

【问题讨论】：

这是javascript / react

标签： javascript arrays reactjs

【解决方案1】：

首先，我想建议使用像react-sortable-tree 这样的包。这只是解决您的问题的众多实施示例之一。我认为，即使是您的数据也已经具有完美的结构作为这个包的输入数据。

如果您有充分的理由自行实现此功能，则应使要求尽可能简单，因为这会变得非常耗时且困难。

把事情分解成小块，最好写一些测试。

您需要为数据操作添加事件处理程序，并且您已经提到了要做什么：

handleRowUp
handleRowDown
handleDeleteRow
handleAddRow

我想你最终会得到一些进一步的帮助函数来保持一切可维护。

添加孩子
删除孩子
更改行层次结构
...

【讨论】：

我喜欢为此使用库的想法。从头开始构建它的想法一点也不吸引人

【解决方案2】：

从这里的示例和代码沙箱中的示例可以看出。您的 JSON 看起来像 M-ary Tree。

    1
    |
   1.1 
    |
  1.1.1
  /   \
1.1.2 1.1.3

因此，您需要使用 DFS、BFS 或 BackTracking 的概念，这可能需要 O(n) 时间复杂度

【讨论】：