Ant Design React使用Tree组件时,如何修改最后一个子项的小图标.

react开发使用的Ant Design React开发框架,需求需要构建树形图.所以使用Tree组件.

在使用Tree组件时,如果我们设置Tree组件showLine属性,则最后一个子项一定会出现一个小文件的图标,这往往不是我们需要的.查看开发文档.

官方的回答是:在 showLine 时，如何隐藏子节点图标？文件图标通过 switcherIcon 来实现，如果不需要你可以覆盖对应的样式跳转.
官方给出的这句解释,我理解上是使用css样式覆盖???或者通过在Tree组件上使用switchIcon属性进行设置.然而并不是,今天在测试使用时,忽然发现这是让在TreeNode子组件上使用这个属性进行设置.
因为渲染树形结构,使用的是TreeNode自定义渲染,然后查看官方文档,并没有在TreeNode解释说明处发现有switcherIcon属性.但是尝试添加后,居然就起作用了.

import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Tree, Spin } from 'antd';
import { DownOutlined, TagsOutlined } from '@ant-design/icons';
import { getHierarchy } from './service';

const { TreeNode } = Tree;

const getTreeNode = (data) => {
  if (data && data.length > 0) {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode key={item.key} title={item.title}>
            {getTreeNode(item.children)}
          </TreeNode>
        );
      }
      return (
        <TreeNode
          key={item.key}
          title={item.title}
          switcherIcon={<TagsOutlined />} // TreeNode这个Tree的子组件居然存在SwitcherIcon属性.
        />
      );
    });
  }
  return [];
};

const Hierarchy = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getHierarchy().then((res) => {
      setData(res.data);
      setLoading(false);
    });
  }, []);

  const handleCheck = (checkedKeys, e) => {
    console.log(e);
    console.log(checkedKeys);
  };
  return (
    <PageHeaderWrapper>
      <Card>
        <Spin spinning={loading}>
          <Tree
            // treeData={data}
            showLine
            blockNode
            autoExpandParent
            checkable
            // icon={<DownOutlined />}
            switcherIcon={<DownOutlined />}
            onCheck={handleCheck}
          >
            {getTreeNode(data)}
          </Tree>
        </Spin>
      </Card>
    </PageHeaderWrapper>
  );
};

export default Hierarchy;

最终渲染结果:

最终:实现方式为:在TreeNode组件上使用switcherIcon属性. 即:switcherIcon={<ReactNode/>}