操作嵌套数据结构

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) 时间复杂度