如何为react-teams的List组件添加Breadcrumb及实现多项自定义需求

1. 在 emptySelectionActionGroups 后添加 Breadcrumb 并显示 name/label #

• 要在空选择操作组后加面包屑，你可以通过 emptySelectionView 自定义空状态模板，把默认的空选择操作按钮和 Breadcrumb 组合渲染。
• 列表项显示 name 和 label，只需自定义 onRenderItem 方法，在模板里直接渲染这两个字段的内容。

2. 过滤文本右侧添加按钮 #

• 放弃 List 内置的过滤框，自己封装一个包含 SearchBox 和 Button 的头部容器，作为 List 的 header 属性传入，就能灵活控制过滤框和按钮的布局。

完整代码示例 #

import React, { useState } from 'react';
import { List, Breadcrumb, BreadcrumbItem, Button, SearchBox, ListItem, ListItemLayout } from '@microsoft/teams-ui-react';

const CustomTeamsList = () => {
  // 模拟列表数据
  const [listItems, setListItems] = useState([
    { id: '1', name: '项目A', label: '已完成' },
    { id: '2', name: '项目B', label: '进行中' },
    { id: '3', name: '项目C', label: '待启动' }
  ]);
  const [filteredItems, setFilteredItems] = useState(listItems);
  const [searchText, setSearchText] = useState('');

  // 过滤逻辑
  const handleSearch = (text) => {
    setSearchText(text);
    const filtered = listItems.filter(item => 
      item.name.toLowerCase().includes(text.toLowerCase()) || 
      item.label.toLowerCase().includes(text.toLowerCase())
    );
    setFilteredItems(filtered);
  };

  // 自定义列表项渲染
  const renderItem = (item) => (
    <ListItemLayout>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
        <span style={{ fontWeight: 600 }}>{item.name}</span>
        <span style={{ fontSize: '0.875rem', color: '#666' }}>{item.label}</span>
      </div>
    </ListItemLayout>
  );

  // 自定义空选择状态视图
  const renderEmptySelectionView = () => (
    <div style={{ textAlign: 'center', padding: '2rem' }}>
      {/* 渲染空状态操作按钮 */}
      <div style={{ marginBottom: '1rem' }}>
        <Button appearance="primary">新建项目</Button>
      </div>
      {/* 添加面包屑 */}
      <Breadcrumb>
        <BreadcrumbItem text="首页" />
        <BreadcrumbItem text="项目列表" />
        <BreadcrumbItem text="空状态" isCurrent />
      </Breadcrumb>
    </div>
  );

  // 自定义头部（包含搜索框和右侧按钮）
  const renderHeader = () => (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '1rem' }}>
      <SearchBox
        placeholder="搜索项目..."
        value={searchText}
        onChange={handleSearch}
        style={{ width: '300px' }}
      />
      <Button appearance="secondary">批量操作</Button>
    </div>
  );

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <List
        items={filteredItems}
        onRenderItem={renderItem}
        header={renderHeader()}
        emptySelectionView={renderEmptySelectionView()}
      />
    </div>
  );
};

export default CustomTeamsList;

代码说明 #

• 自定义 emptySelectionView 整合了空状态操作按钮和面包屑，比默认的 emptySelectionActionGroups 布局更灵活。
• onRenderItem 直接渲染 name 和 label 字段，样式可根据需求调整。
• 头部用 flex 布局实现搜索框和按钮左右排列，完全可控。

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