操作嵌套数据结构

Question

我正在处理处理标签和子标签的组件。我已经弄清楚了数据结构（我认为）以及如何使用现有数据呈现组件。示例： 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" }]          }        ]      }    ]  }]

Answer 1

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

如果你有充分的理由自己实现它，你应该使要求尽可能简单，因为这会变得非常耗时和困难。

将事情分解成小块并更好地编写一些测试。

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

• 句柄向上

• handleRowDown

• 句柄删除行

• 句柄添加行

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

• 添加孩子

• 删除孩子

• 更改行层次结构

• ...

Answer 2

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

   1

    |

   1.1 

    |

  1.1.1

  /   \

1.1.2 1.1.3

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