如何控制Fluent UI React DetailsList分页，避免生成ms-List-page容器

原因说明 #

这个ms-List-page容器是DetailsList底层依赖的List组件在启用虚拟滚动时生成的：默认按pageSize=10的数量将列表项分组包装，目的是优化长列表渲染性能，但会干扰自定义布局。

两种解决方式 #

方式一：禁用虚拟滚动 #

如果数据量不大、不需要虚拟滚动优化，直接关闭该功能即可彻底消除ms-List-page容器：

<DetailsList
  setKey="items"
  items={this.state.items}
  columns={this.state.columns}
  selection={this._selection}
  selectionPreservedOnEmptyClick={true}
  onRenderItemColumn={this.onRenderCell}
  dragDropEvents={this._dragDropEvents}
  checkboxVisibility={CheckboxVisibility.hidden}
  isHeaderVisible={false}
  className={styles.detailsList}
  onRenderRow={this._onRenderRow}
  enableVirtualization={false} // 新增：禁用虚拟滚动
/>

方式二：调大pageSize（保留虚拟滚动） #

如果需要保留虚拟滚动的性能优势，只需将pageSize设为大于数据总条数的数值，这样只会生成一个ms-List-page容器，不会按10条拆分：

<DetailsList
  setKey="items"
  items={this.state.items}
  columns={this.state.columns}
  selection={this._selection}
  selectionPreservedOnEmptyClick={true}
  onRenderItemColumn={this.onRenderCell}
  dragDropEvents={this._dragDropEvents}
  checkboxVisibility={CheckboxVisibility.hidden}
  isHeaderVisible={false}
  className={styles.detailsList}
  onRenderRow={this._onRenderRow}
  pageSize={this.state.items.length + 1} // 设为大于数据总数的值
/>

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