如何在Office UI React Fabric中替换Nav组件的Chevron图标

嘿，我之前也折腾过Office UI Fabric Nav组件的图标替换，确实INavStyles管不了图标这块，得用自定义渲染的路子来搞，给你详细说说怎么实现：

核心思路 #

Nav组件提供了onRenderItem属性，允许我们自定义每个菜单项的渲染逻辑，我们可以通过这个钩子，把默认的Chevron图标替换成需要的FolderHorizontal/OpenFolderHorizontal图标。

具体步骤 #

1. 导入所需的图标和组件 #

首先确保你导入了正确的图标和Nav相关组件，注意不同Fabric版本的图标导入路径可能略有不同：

import * as React from "react";
import { Nav, INavProps, INavItem } from 'office-ui-fabric-react';
// 如果是较新的Fabric版本（比如Fluent UI v8+），图标可能在这里导入
import { FolderHorizontalIcon, OpenFolderHorizontalIcon } from '@fluentui/react-icons';
// 旧版本的话可以从这里导入：
// import { FolderHorizontalIcon, OpenFolderHorizontalIcon } from 'office-ui-fabric-react/lib/Icons';

2. 编写自定义渲染函数 #

这个函数会接收菜单项和默认渲染方法，我们要做的就是克隆默认渲染的元素，替换掉里面的Chevron图标：

const renderCustomNavItem = (item: INavItem, defaultRender: (item: INavItem) => JSX.Element) => {
  // 先获取默认渲染的菜单项元素
  const defaultNavItem = defaultRender(item);

  // 只处理带有子菜单的项（也就是原本会显示Chevron图标的项）
  if (item.hasSubMenu) {
    // 遍历默认元素的子节点，找到Chevron图标并替换
    return React.cloneElement(defaultNavItem, {}, React.Children.map(defaultNavItem.props.children, child => {
      if (React.isValidElement(child) && child.props.iconName?.includes('Chevron')) {
        // 根据菜单项的展开状态，切换文件夹图标
        return item.expanded ? <OpenFolderHorizontalIcon /> : <FolderHorizontalIcon />;
      }
      // 非图标节点保持原样
      return child;
    }));
  }

  // 没有子菜单的项直接返回默认渲染结果
  return defaultNavItem;
};

3. 在Nav组件中使用自定义渲染函数 #

最后把这个自定义函数传给Nav的onRenderItem属性即可：

const CustomIconNav = () => {
  // 定义你的导航项数据
  const navItems: INavItem[] = [
    {
      name: '主文件夹',
      hasSubMenu: true,
      expanded: false,
      links: [
        { name: '子项1' },
        { name: '子项2' }
      ]
    },
    {
      name: '普通项',
      url: '/normal-item'
    }
  ];

  return (
    <Nav
      items={navItems}
      onRenderItem={renderCustomNavItem}
    />
  );
};

// 渲染组件
ReactDOM.render(<CustomIconNav />, document.getElementById('root'));

注意事项 #

• 如果你的Fabric版本非常旧，可能需要调整图标的名称或者导入方式，比如有些旧版本里图标名称是FolderHorizontal而不是FolderHorizontalIcon。
• 这个方法保留了Nav组件原有的所有交互逻辑（比如展开/折叠的动画、样式），只是替换了图标，不会破坏原有功能。

内容的提问来源于stack exchange，提问作者Newton Sheikh