如何在react-virtualized表格中实现单元格自动调整大小及解决cellRenderer配置问题

我之前也踩过这个坑，你遇到的核心问题是react-virtualized的Table组件并不像List那样支持全局cellRenderer配置，正确的做法是把自定义cellRenderer绑定到每个Column上，同时要记得传递必要的布局属性。

第一步：修正cellRenderer的配置位置 #

把cellRenderer从Table组件移到每个Column组件上——Table的全局cellRenderer会被Column的配置覆盖，所以之前放在Table上完全没效果：

<AutoSizer>
  {({ height, width }) => (
    <Table
      width={width}
      height={height}
      headerHeight={20}
      rowHeight={30}
      deferredMeasurementCache={cache.current}
      rowCount={usersData.length}
      rowGetter={({ index }) => usersData[index]}
      // 移除这里的cellRenderer配置
    >
      <Column 
        label="User Data" 
        dataKey="userData" 
        width={width / 2}
        cellRenderer={cellRenderer} // 移到Column上
      />
      <Column 
        label="Activities" 
        dataKey="userActivity" 
        width={width / 2}
        cellRenderer={cellRenderer}
      />
    </Table>
  )}
</AutoSizer>

第二步：完善自定义cellRenderer的属性传递 #

你说放在Column上缺少key和style属性，其实这些属性都在Column传递给cellRenderer的props里，需要手动把它们传递给渲染的容器元素——这是虚拟列表正常布局的关键：

function cellRenderer(props) {
  // 解构出必要的属性
  const { style, key, cellData, columnIndex, rowIndex, parent } = props;
  
  return (
    <CellMeasurer
      cache={cache}
      columnIndex={columnIndex}
      parent={parent}
      rowIndex={rowIndex}
    >
      {/* 必须传递style和key，否则虚拟单元格会布局混乱 */}
      <div key={key} style={style}>
        {cellData}
      </div>
    </CellMeasurer>
  );
}

第三步：确保deferredMeasurementCache正确初始化 #

要让自动调整大小生效，你的缓存对象必须正确配置，比如如果需要动态计算行高，应该这样初始化：

import { CellMeasurerCache } from 'react-virtualized';

// 在组件内部初始化缓存
const cache = useRef(new CellMeasurerCache({
  fixedWidth: true, // 如果列宽固定就设为true，要自动列宽则设为false
  defaultHeight: 30, // 默认行高
}));

同时，Table的rowHeight要关联缓存的行高：

<Table
  // ...其他属性
  rowHeight={cache.current.rowHeight} // 用缓存的动态行高
  deferredMeasurementCache={cache.current}
/>

关键注意点 #

• style属性不能丢：react-virtualized依赖这个属性里的position、top、left等样式来定位虚拟单元格，不传递会导致布局错乱。
• key属性必须传：符合React列表渲染的要求，避免重复渲染警告。
• Column是Table的核心配置单元：每个列的渲染逻辑都是独立配置在Column上的，Table的全局cellRenderer只是兜底的默认实现。

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