时间戳

首页 > 解决方案 > AntD DirectoryTree的节点按字母顺序排序

reactjs - AntD DirectoryTree的节点按字母顺序排序

问题描述

我正在使用 Ant Design 的目录树，我希望能够按字母顺序对节点进行排序，就像在硬盘驱动器上使用文件和文件夹或 VS Code 对文件和文件夹进行排序的方式一样（更具体到我的用例） . Antd DirectoryTree API需要一个这样的节点数组：

const treeData = [
  {
    title: 'parent 0',
    key: '0-0',
    children: [
      {
        title: 'leaf 0-0',
        key: '0-0-0',
        isLeaf: true,
      },
      {
        title: 'leaf 0-1',
        key: '0-0-1',
        isLeaf: true,
      },
    ],
  },
  {
    title: 'parent 1',
    key: '0-1',
    children: [
      {
        title: 'leaf 1-0',
        key: '0-1-0',
        isLeaf: true,
      },
      {
        title: 'leaf 1-1',
        key: '0-1-1',
        isLeaf: true,
      },
    ],
  },
];

我递归地生成了我的 treeData 数组，所以我不确定我应该在哪里添加排序逻辑，因为我一次只能处理一个节点，而且我不觉得我可以在目录的每个级别介入并排序递归。

我想我可以获取递归后生成的数组并再次映射它，并创建一个数组数组，方法是查看每个节点并尝试将具有相同父节点的节点分组到他们自己的数组中，然后对其中的每一个进行排序数组，然后将其展平......但这可能非常低效。有没有人尝试对 AntD DirectoryTree 进行排序？

标签： reactjsecmascript-6antd

解决方案

这实际上非常简单，因为我使用了递归方法，所以我让它变得比需要的更难。我的完整解决方案要复杂一些，但唯一需要的部分是对每个递归调用进行排序的简单调用。

sort((a, b) => ((a.name > b.name) ? 1 : -1));

推荐阅读