Как лучше организовать DnD древовидные категории на React?

Question

[RusTorg]

Как на реакте можно организовать древовидный вид элементов c drag-and-drop?
Как пример редактор меню в WP:


Пытался сам реализовать древовидность через библиотеку react-beautiful-dnd, она позволяет перетаскивать компоненты между спейсами (несколькими областями с элементами одного типа) но не поддерживает вложенность DragDropContext`ов из-за чего неправильно работает захват перетаскиваемой области и стили не обновляются у перетаскиваемого элемента (Пример как react-beautiful-dnd не умеет работать со вложенностью codesandbox.io.).

Answer 1

[RusTorg]

react-sortable-tree

Answer 2

[Сергей Сунцев]

Я бы разделил задачу на несколько действий, для начала сформировал модель данных, как я понимаю это будет дерево, и для работы с ним сделал функцию обхода, модернизируя которую я бы смог на уровне модели оперировать данными.
Модель данных можно сформировать, как плоскую(ключ-значение и идентификатор родителя), так и глубокую, мне нравится глубокие.
Чтение из такой моделиможет выглядеть примерно так :

export const getObjects = (obj, key, val) => {
  let objects = []
  for (let i in obj) {
    if (!obj.hasOwnProperty(i)) continue
    if (typeof obj[i] == 'object') {
      objects = objects.concat(getObjects(obj[i], key, val))
    } else if (i == key && obj[key] == val) {
      objects.push(obj)
    }
  }
  return objects
}

Далее я бы создал ui компонент, в который передавал объект, в нем подключил какую нибудь DnD библиотеку
типа этой
На самом деле это не так сложно, как кажется, просто надо определять текущую вложенность, редактируемого элемента

Comments

[RusTorg]

Официальный React DnD я не могу использовать ибо в проекте нету Redux, я использую другую имплементацию flux а сама библиотека заточена под Redux.

[Сергей Сунцев]

RusTorg, Можно и самому написать, юзать тот же html5 DnD