ReactJS可排序dnd树设置

再次反应新手

我有一个论坛和管理页面。它是一个树结构，具有潜在的无限深度，按order_id字段排序。 我可以从api中获得它，它可以是一棵树，其中有一个children数组字段保存每个节点的子节点，也可以是一个平面数组，它有一个祖先，一个字符串保存节点的整个路径，由一个/和一个parent_id字段分隔。 我需要能够移动它们，展开和折叠子树，并能够在任何地方添加节点

现在我有几个问题：

是否有一个好的开箱即用的UI库能够拖放它们以重新排列？我发现了这个：但我不能让它没有一个有限的高度框架，而且定制这些主题看起来太复杂了

如果我要使用react dnd从头开始，那么使用此树的更有效方法是什么？将其作为树使用如何添加/更新节点？或者将其平铺存储并在渲染上构建树，以便于管理集合，但会使渲染和排序逻辑复杂化

---

这听起来像是一个复杂而有趣的问题。如果这个库不能按照你的风格去做，那么你必须从头开始构建它

我会将所有节点对象存储在一个数组中，该数组具有一个children属性，该属性包含对其所有子节点的引用；如果订单id保证唯一，您可以将其作为参考

我还将存储父节点的order_id，因为它将有助于操纵树

Nodes = [
  {order_id: 1, name:"order1", children_ids:[2,3], parent_id: 0},
  {order_id: 2, name:"order2", children_ids:[], parent_id: 1},
  {order_id: 3, name:"order3", children_ids:[], parent_id: 1},
]

您将不得不在渲染上构建树，这可能是一个脑筋急转弯，但只需一点工作就完全可行了

添加新节点时，必须更新树中新节点的父节点和子节点

重新排列节点时，必须向上移动到父节点并将其从其子节点中移除。您还必须向下移动到它的子节点，并将它们的父节点设置为重新排列的节点的旧父节点。这将从树中删除节点。然后，将重新排列的节点添加到树中

Nodes = [
  {order_id: 1, name:"order1", children_ids:[2,3], parent_id: 0},
  {order_id: 2, name:"order2", children_ids:[], parent_id: 1},
  {order_id: 3, name:"order3", children_ids:[], parent_id: 1},
]

您所做的任何操作都将涉及到对该节点的父节点和子节点的操作-这就是为什么我建议同时存储子节点id和父节点id的原因。这样可以避免您进行太多计算效率低下的树遍历

我不建议使用你提到的祖先字段。移动节点的逻辑将过于复杂，如果这样做，则必须遍历并编辑整个树

第一步是与react dnd集成；使每个节点都可以拖动。当您将其放到另一个节点上进行重新排列时，将触发重新排列处理程序

---

祝你好运。

谢谢你的建议。保留孩子id和家长id似乎有点多余，但我一定会试试你的一般想法。让我知道进展如何，祝你好运。这个想法是不必做太多的树遍历。重新排列节点时，必须找到其父节点。如果不存储父id，则必须遍历树以查找父id。这取决于你。。速度稍慢，但占用的空间较少。注意，您可能需要在dnd包中创建递归多列表多列。但我不知道怎么做。