React框架下如何为AntD的Tree组件自定义展开、折叠状态的图标？

• 方案1：switcherIcon回调函数实现（最推荐，原生支持）
  AntD Tree组件的switcherIcon属性支持传入函数，入参可获取当前节点的expanded展开状态，直接根据状态返回对应图标即可，示例代码如下：

  import { UpOutlined, DownOutlined } from '@ant-design/icons';
  import { Tree } from 'antd';
  
  const CustomTree = () => {
    // 树节点数据、展开事件等其他逻辑省略
    return (
      <Tree
        switcherIcon={(nodeProps) => {
          // 展开状态返回向上箭头，折叠状态返回向下箭头
          return nodeProps.expanded ? <UpOutlined /> : <DownOutlined />
        }}
        // 其他Tree属性按需配置
      />
    )
  }
  

  该方案适配AntD v4.17.0及以上版本，无需额外样式修改，维护成本最低。

• 方案2：CSS样式覆盖（适配低版本AntD）
  如果你使用的AntD版本较低不支持switcherIcon传函数，可以通过Tree组件自带的状态类名匹配不同状态的开关图标进行替换，示例代码如下：

  /* 匹配折叠状态的开关节点 */
  .ant-tree-switcher.ant-tree-switcher_close .ant-tree-switcher-icon {
    /* 替换为自定义向下箭头，以下为iconfont示例，也可配置background引入svg/图片图标 */
    font-family: '你的自定义iconfont字体名';
    content: '\自定义向下箭头编码';
  }
  /* 匹配展开状态的开关节点 */
  .ant-tree-switcher.ant-tree-switcher_open .ant-tree-switcher-icon {
    font-family: '你的自定义iconfont字体名';
    content: '\自定义向上箭头编码';
  }
  

• 方案3：自定义节点头部
  如果需要同时修改节点其他展示内容，你可以通过title插槽自定义整个节点的头部区域，自己维护展开状态判断展示对应图标，配合onExpand事件控制节点展开折叠即可，该方案自由度最高但开发成本也相对更高。

内容的提问来源于stack exchange，提问作者KMS NYMISHA