Antd React Tree控件自定义展示效果

最近在用React做项目，使用到antd作为ui，发现官网一些案例说明不是很详细

const data = [
  name:'test',
  children:[
    name:'child'
  ]
]

有一个这样的数据格式，与官网案例不同的是需要显示的字段为name，官网为title，而且官网的字段中包含key

文档中说明可以使用 TreeNode 自定义显示，但又没有案例说明，下面是一个简单实现Tree自定义显示的例子

import { Tree } from "antd";
//引入Tree控件
import React from "react";
const { TreeNode } = Tree;//引入TreeNode控件

class TreeDemo extends React.Component<any, any> {
  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
  constructor(props: any) {
    super(props);
    this.state = { 
      menu: [
        name:'test',
        children:[
          name:'child'
        ]
      ]
    };
  }
//递归处理数据
  loop = (arr: Array<object>) => {
    return arr.map((item: any) => {
      return (
        //测试数据中key为name字段，实际开发中应当使用id等不重复字段
        <TreeNode title={<span>{item.name}</span>} key={item.name}>
          {item.children && item.children.length > 0
            ? this.loop(item.children)
            : null}
        </TreeNode>
      );
    });
  };
  render() {
    return (
      <div>
        <Tree>{this.loop(this.state.menu)}</Tree>
      </div>
    );
  }
}

以上方式为antd 3x 至 antd 4x的方式，在4x中不推荐，Tree控件的children即将被废弃，推荐使用titleRender方式

import { Tree } from "antd";
//引入Tree控件
import React from "react";

class TreeDemo extends React.Component<any, any> {
  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
  constructor(props: any) {
    super(props);
    this.state = { 
      menu: [
        name:'test',
        children:[
          name:'child'
        ]
      ]
    };
  }
//递归处理数据
  loop = (arr: Array<object>): any => {
    return arr.map((item: any) => {
      item.key = item.id;
      return item.children && item.children.length > 0
        ? { ...item, children: this.loop(item.children) }
        : item;
    });
  };
  render() {
    return (
      <div>
        <Tree
              titleRender={(nodeData: any) => {
                return `${nodeData.name}`;
              }}
              treeData={this.loop(this.state.menu)}
            ></Tree>
      </div>
    );
  }
}

虽然此方式可以自定义渲染title，但数据源中不存在key值时依旧会提示key undefind。因此推荐递归处理数据后渲染