React-virtualized中CellMeasurer默认用minHeight，如何强制计算实际高度？

我在使用react-virtualized的List组件，依赖CellMeasurerCache提供高度数据，初始化代码如下：

const cache = new CellMeasurerCache({fixedWidth: true, rowHeight: 150, minHeight: 50 });

列表渲染代码：

return (
  <div className={classes.maxHeight}>
    <AutoSizer>
      {({height, width}) =>
        <List
          className='List'
          height={height}
          width={width}
          overscanRowCount={5}
          rowCount={content.length}
          rowHeight={cache.rowHeight}
          rowRenderer={listRowRenderer(content)}>
        </List>
      }
    </AutoSizer>
  </div>
);

问题 #

部分行默认使用了minHeight（50），而非根据内容计算的实际高度。但向下滚动再返回后，高度就能正常显示。如何强制触发实际高度的计算？

rowRenderer代码：

const item = data[index];

return (
  <CellMeasurer
    cache={cache}
    columnIndex={0}
    key={key}
    rowIndex={index}
    parent={parent}>
    {({measure, registerChild}) =>
      <div ref={registerChild} style={style}>
        (content here)
      </div>
    }
  </CellMeasurer>
);

已尝试在卡片组件的useEffect中调用CellMeasurer的measure方法，但问题仍未解决。

可行解决方案 #

1. 替换rowHeight为缓存的getRowHeight方法
   不要直接传递cache.rowHeight，改用cache.getRowHeight，该方法会优先读取缓存中已计算的行高，未缓存时才使用默认值：

<List
  // ...其他属性
  rowHeight={cache.getRowHeight}
/>

2. 手动清空缓存并强制List重渲染
   当内容加载或更新完成后，清空旧缓存并让List重新渲染。可以通过修改List的key实现：

// 当content数据源变化时，更新key触发重渲染
<List
  key={JSON.stringify(content)}
  // ...其他属性
/>

也可以在内容渲染完成后延迟调用measure方法，确保DOM已更新：

{({measure, registerChild}) =>
  <div ref={registerChild} style={style}>
    <YourContentComponent
      onLoadComplete={() => {
        setTimeout(measure, 0);
      }}
    />
  </div>
}

3. 调整预渲染行数与初始化时机
   增大overscanRowCount的值（比如设为10），让组件提前渲染更多行，确保初始可见区域外的行也能正确测量高度。同时确保List在content完全加载后再渲染，避免数据源为空导致的测量异常。

4. 检查CellMeasurer的parent参数传递
   确保rowRenderer正确接收并传递parent参数（List组件实例），缺失该参数会导致测量失效：

const listRowRenderer = (content) => ({ index, key, style, parent }) => {
  const item = content[index];
  return (
    <CellMeasurer
      cache={cache}
      columnIndex={0}
      key={key}
      rowIndex={index}
      parent={parent}>
      {({measure, registerChild}) =>
        <div ref={registerChild} style={style}>
          (content here)
        </div>
      }
    </CellMeasurer>
  );
};

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