Fluent UI DetailsList组件渲染时默认选中第一项的实现方法

要实现DetailsList渲染完成后自动选中第一项，核心是利用组件的selection属性配合ISelection实例，在数据就绪后主动设置选中状态，具体步骤如下：

1. 创建并配置Selection实例 #

首先需要初始化一个Selection对象（来自Fluent UI/Office UI Fabric React），并绑定你的选择变化逻辑：

import { Selection, DetailsList, SelectionMode } from '@fluentui/react';

2. 在数据就绪后设置默认选中 #

不管是函数组件还是类组件，都需要在items数据加载完成后，调用Selection实例的方法选中第一项。

函数组件示例（结合Hooks）

// 初始化Selection实例，避免重复创建
const selection = useMemo(() => {
  const selInstance = new Selection({
    onSelectionChanged: () => {
      const selectedSamples = selInstance.getSelection() as IClientSample[];
      setAnnotationSampleListState(prevState => ({ 
        ...prevState, 
        selectedSamples 
      }));
    }
  });
  return selInstance;
}, []);

// 监听items变化，数据就绪时选中第一项
useEffect(() => {
  if (state.items?.length > 0) {
    // 两种方式二选一即可
    selInstance.setSelectedItems([state.items[0]]);
    // 或者 selInstance.setSelectedIndex(0);
  }
}, [state.items, selection]);

// 渲染DetailsList时传入selection属性
return (
  <DetailsList
    items={state.items}
    columns={state.columns}
    setKey="id"
    selection={selection}
    selectionMode={SelectionMode.single} // 根据需求设置单选/多选
  />
);

类组件示例

class SampleComponent extends React.Component {
  private selection = new Selection({
    onSelectionChanged: () => {
      const selectedSamples = this.selection.getSelection() as IClientSample[];
      this.setState(prevState => ({
        ...prevState,
        selectedSamples
      }));
    }
  });

  componentDidUpdate(prevProps, prevState) {
    // 当items更新且有数据时，选中第一项
    if (this.state.items?.length > 0 && prevState.items !== this.state.items) {
      this.selection.setSelectedItems([this.state.items[0]]);
    }
  }

  render() {
    return (
      <DetailsList
        items={this.state.items}
        columns={this.state.columns}
        setKey="id"
        selection={this.selection}
        selectionMode={SelectionMode.single}
      />
    );
  }
}

关键注意点 #

• 必须给DetailsList传入selection属性，否则无法控制选中状态
• 一定要在items数组有数据后再执行选中操作，避免空数组报错
• selectionMode需要显式设置（比如SelectionMode.single单选、SelectionMode.multiple多选），默认情况下DetailsList的选择模式是关闭的

内容的提问来源于stack exchange，提问作者Makaraju Bhanu prathyusha