Блог

Я пытаюсь сохранить порядок узлов в дереве, используя react-сортируемое дерево (https://github.com/frontend-collective/react-sortable-tree), например

  - Label 1
      - Label 2
      - Label 3
 

Изменение порядка метки 3 на метку 2 следующим образом, а также передача индекса дерева,

  - Label 1
      - Label 3
      - Label 2
 

После установки обновленного состояния и перезагрузки древовидная структура страницы не соответствует порядку treeIndex.

Вещи, которые я пробовал:

Я попробовал следующее, используя утилиты сортируемого дерева react (https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js)

Я попытался преобразовать свое текущее дерево в плоскую структуру, используя getFlatDataFromTree() , а затем внести необходимые изменения в treeIndex, а затем преобразовать плоские данные обратно в древовидную структуру, используя ту же библиотеку util getTreeFromFlatData() , но последовательность в отношении treeIndex не учитывается.

У меня уже есть данные о дереве, хранящиеся в TreeData,

здесь метки содержат путь к каждому узлу дерева. Поэтому я перебираю их и устанавливаю правильный порядок.

Код:

 flatTree.forEach(treeNode => {
        labelNodes.forEach(element => {
          if (treeNode.node.id === element.id) {
            treeNode.path = element.path;
            treeNode.treeIndex = element.treeIndex;
          }
          return true;
        });
      });

const getParentKey = node => {
        if (node.parentNode) {
          return node.parentNode.id;
        }
        return 0;
      };

const sortedFlatTree = flatTree.sort((a, b) => a.treeIndex - b.treeIndex);

const treeConversion = getTreeFromFlatData({
        flatData: sortedFlatTree,
        getParentKey,
      });
 

Преобразование дерева не поддерживает порядок сортировки.