时间戳

首页 > 解决方案 > 操作嵌套数据结构

javascript - 操作嵌套数据结构

问题描述

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

示例：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" }]
          }
        ]
      }
    ]
  }]

标签： javascriptarraysreactjs

解决方案

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

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

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

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

  • 处理行向上
  • handleRowDown
  • 句柄删除行
  • 句柄添加行

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

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

推荐阅读