如何在Fluent UI GroupedList组件中添加父级条目？

针对你遇到的GroupedList只能显示分组、无法添加顶级条目的问题，这里提供两种可行的实现方案，不需要依赖官方修复：

方案一：虚拟分组+隐藏分组头 #

通过将顶级条目包装成一个无显示头部的虚拟分组，让视觉上看起来是顶级条目，同时保留GroupedList的完整功能（筛选、排序、交互统一）：

1. 调整数据源结构，给顶级条目创建一个特殊分组（比如用__topLevel__作为key），分组名称留空
2. 自定义onRenderHeader函数，判断如果是这个特殊分组，直接返回null隐藏头部
3. 正常渲染其余分组

示例代码：

import { GroupedList, GroupHeader, IGroupHeaderProps } from '@fluentui/react';

// 自定义分组头部渲染
const renderGroupHeader = (props: IGroupHeaderProps) => {
  // 隐藏顶级虚拟分组的头部
  if (props.group.key === '__topLevel__') {
    return null;
  }
  // 正常渲染其他分组头部
  return <GroupHeader {...props} />;
};

// 构造包含虚拟分组的数据源
const groups = [
  { 
    key: '__topLevel__', 
    name: '', 
    items: [
      { key: 'item1', name: '顶级条目1' },
      { key: 'item2', name: '顶级条目2' }
    ]
  },
  {
    key: 'group1',
    name: '业务分组1',
    items: [/* 分组1的条目 */]
  },
  {
    key: 'group2',
    name: '业务分组2',
    items: [/* 分组2的条目 */]
  }
];

// 渲染GroupedList
<GroupedList
  groups={groups}
  onRenderHeader={renderGroupHeader}
  onRenderItem={(item) => (
    <div style={{ padding: '8px 16px', borderBottom: '1px solid #eee' }}>
      {item.name}
    </div>
  )}
/>

方案二：独立渲染顶级条目+GroupedList #

如果不想修改分组结构，可以在GroupedList外部单独渲染顶级条目，通过复用样式和渲染函数保证视觉和交互一致性：

1. 用List组件单独渲染顶级条目，复用GroupedList的条目渲染函数
2. 调整GroupedList的样式，去掉顶部间距，让两个列表无缝衔接
3. 确保选中、hover等交互逻辑和GroupedList保持一致

示例代码：

import { GroupedList, List } from '@fluentui/react';

const topLevelItems = [
  { key: 'item1', name: '顶级条目1' },
  { key: 'item2', name: '顶级条目2' }
];
const groupedData = [
  {
    key: 'group1',
    name: '业务分组1',
    items: [/* 分组1的条目 */]
  },
  {
    key: 'group2',
    name: '业务分组2',
    items: [/* 分组2的条目 */]
  }
];

// 复用的条目渲染函数
const renderItem = (item) => (
  <div style={{ padding: '8px 16px', borderBottom: '1px solid #eee' }}>
    {item.name}
  </div>
);

// 组合渲染
<div>
  <List
    items={topLevelItems}
    onRenderItem={renderItem}
  />
  <GroupedList
    groups={groupedData}
    onRenderItem={renderItem}
    styles={{ root: { marginTop: 0 } }}
  />
</div>

方案对比 #

• 方案一：优势是所有条目都在GroupedList内部，筛选、排序等功能可以直接覆盖所有内容，状态管理更统一；缺点是需要调整数据源结构。
• 方案二：优势是不需要修改原有分组数据，实现更灵活；缺点是需要单独处理顶级条目的筛选、排序逻辑，要额外保证交互一致性。

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