请教：如何在antd tree组件中使用预排序无限级分类树数据

Question

我从后台得到的是预排序无限级分类树数据，想在antd tree组件展示，基础不扎实弄不出来，现诚心求教。

预排序无限级分类树数据预排序算法

const treeData = [{
  'key': 1,
  'lft': 1,
  'rgt': 62,
  'depth': 0,
  'title': '1',
},
  {
    'key': 2,
    'lft': 2,
    'rgt': 21,
    'depth': 1,
    'title': '1-1',
  },
  {
    'key': 15,
    'lft': 3,
    'rgt': 4,
    'depth': 2,
    'title': '1-1-1',
  },
  {
    'key': 16,
    'lft': 5,
    'rgt': 6,
    'depth': 2,
    'title': '1-1-2',
  },
  {
    'key': 17,
    'lft': 7,
    'rgt': 8,
    'depth': 2,
    'title': '1-1-3',
  },
  {
    'key': 18,
    'lft': 9,
    'rgt': 10,
    'depth': 2,
    'title': '1-1-4',
  },
  {
    'key': 19,
    'lft': 11,
    'rgt': 12,
    'depth': 2,
    'title': '1-1-5',
  },
  {
    'key': 20,
    'lft': 13,
    'rgt': 14,
    'depth': 2,
    'title': '1-1-6',
  },
  {
    'key': 21,
    'lft': 15,
    'rgt': 16,
    'depth': 2,
    'title': '1-1-7',
  },
  {
    'key': 22,
    'lft': 17,
    'rgt': 18,
    'depth': 2,
    'title': '1-1-8',
  },
  {
    'key': 23,
    'lft': 19,
    'rgt': 20,
    'depth': 2,
    'title': '1-1-9',
  },
  {
    'key': 3,
    'lft': 22,
    'rgt': 23,
    'depth': 1,
    'title': '1-2',
  },
  {
    'key': 4,
    'lft': 24,
    'rgt': 27,
    'depth': 1,
    'title': '1-3',
  },
  {
    'key': 24,
    'lft': 25,
    'rgt': 26,
    'depth': 2,
    'title': '1-3-1',
  },
  {
    'key': 5,
    'lft': 28,
    'rgt': 29,
    'depth': 1,
    'title': '1-4',
  },
  {
    'key': 6,
    'lft': 30,
    'rgt': 35,
    'depth': 1,
    'title': '1-5',
  },
  {
    'key': 25,
    'lft': 31,
    'rgt': 32,
    'depth': 2,
    'title': '1-5-1',
  },
  {
    'key': 26,
    'lft': 33,
    'rgt': 34,
    'depth': 2,
    'title': '1-5-2',
  },
  {
    'key': 7,
    'lft': 36,
    'rgt': 37,
    'depth': 1,
    'title': '1-6',
  },
  {
    'key': 8,
    'lft': 38,
    'rgt': 41,
    'depth': 1,
    'title': '1-7',
  },
  {
    'key': 27,
    'lft': 39,
    'rgt': 40,
    'depth': 2,
    'title': '1-7-1',
  },
  {
    'key': 9,
    'lft': 42,
    'rgt': 45,
    'depth': 1,
    'title': '1-8',
  },
  {
    'key': 28,
    'lft': 43,
    'rgt': 44,
    'depth': 2,
    'title': '1-8-1',
  },
  {
    'key': 10,
    'lft': 46,
    'rgt': 49,
    'depth': 1,
    'title': '1-9',
  },
  {
    'key': 29,
    'lft': 47,
    'rgt': 48,
    'depth': 2,
    'title': '1-9-1',
  },
  {
    'key': 11,
    'lft': 50,
    'rgt': 51,
    'depth': 1,
    'title': '1-10',
  },
  {
    'key': 12,
    'lft': 52,
    'rgt': 53,
    'depth': 1,
    'title': '1-11',
  },
  {
    'key': 13,
    'lft': 54,
    'rgt': 57,
    'depth': 1,
    'title': '1-12',
  },
  {
    'key': 30,
    'lft': 55,
    'rgt': 56,
    'depth': 2,
    'title': '1-12-1',
  },
  {
    'key': 14,
    'lft': 58,
    'rgt': 61,
    'depth': 1,
    'title': '1-13',
  },
  {
    'key': 31,
    'lft': 59,
    'rgt': 60,
    'depth': 2,
    'title': '1-13-1',
  },
];

想直接生成如下类似数据 antd tree

<Tree>
  <TreeNode title="1" key="1">
    <TreeNode title="1-1" key="2" >
      <TreeNode title="1-1-1" key="15" />
      <TreeNode title="1-1-2" key="16" />
    </TreeNode>
    //更多...
  </TreeNode>
</Tree>

而不是先转换成嵌套数据

function  toNestedArray(flatArray=[], {title='title', key='key', depth='depth'}){
  let node = flatArray.shift();
  let lvl = node[depth];
  let root = {...node, title: node[title], key: node[key], children: []};
  let tree;
  let current_node = [];
  current_node[lvl] = root;
  while (flatArray.length > 0) {
    node = flatArray.shift();
    tree = {...node, title: node[title], key: node[key], children: []};
    lvl = node[depth];
    if (current_node[lvl - 1] === undefined) throw 'invalid list!';
    current_node[lvl - 1].children.push(tree);
    current_node[lvl] = tree;
  }
  return [root];
}

然后用

renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} />;
    });
  }