使用CellMeasurer的React虚拟化表没有正确计算高度

问题描述：在使用CellMeasurer的React虚拟化表时，发现表格没有正确计算行高。

解决方案：

确保正确引入相关依赖：
- react-virtualized：React虚拟化库，提供了CellMeasurer组件。
- react-virtualized-auto-sizer：用于自动调整React虚拟化组件大小的辅助库。

确保正确使用CellMeasurer组件：
- 在表格的每个单元格中使用CellMeasurer组件包裹内容。
- 设置CellMeasurer的width和height属性，以便正确测量单元格的大小。
确保正确使用Table组件：
- 使用AutoSizer组件包裹Table组件，以便自动调整表格大小。
- 设置Table组件的rowHeight属性为一个函数，该函数返回单元格的高度。
确保正确计算行高：
- 在rowHeight函数中，使用CellMeasurerCache对象来缓存已测量的行高。
- 在rowHeight函数中，使用CellMeasurerCache对象的measure方法来测量单元格的高度。

示例代码：

import React from 'react';
import { Table, Column, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
import { AutoSizer } from 'react-virtualized-auto-sizer';

const cache = new CellMeasurerCache({
  defaultHeight: 50,
  fixedWidth: true,
});

const data = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
  // ...
];

const ExampleTable = () => {
  const rowHeight = ({ index }) => {
    cache.clear(index, 0);
    cache.rowHeight({ index });
    return cache.getHeight(index, 0);
  };

  const renderCell = ({ columnIndex, key, parent, rowIndex, style }) => {
    const item = data[rowIndex];
    let content;

    switch (columnIndex) {
      case 0:
        content = item.id;
        break;
      case 1:
        content = item.name;
        break;
      case 2:
        content = item.age;
        break;
      default:
        content = '';
    }

    return (
      <CellMeasurer
        cache={cache}
        columnIndex={columnIndex}
        key={key}
        parent={parent}
        rowIndex={rowIndex}
      >
        <div style={style}>{content}</div>
      </CellMeasurer>
    );
  };

  return (
    <AutoSizer>
      {({ height, width }) => (
        <Table
          width={width}
          height={height}
          rowCount={data.length}
          rowHeight={rowHeight}
          rowGetter={({ index }) => data[index]}
          rowRenderer={renderCell}
          headerHeight={50}
        >
          <Column label="ID" dataKey="id" width={100} />
          <Column label="Name" dataKey="name" width={200} />
          <Column label="Age" dataKey="age" width={100} />
        </Table>
      )}
    </AutoSizer>
  );
};

export default ExampleTable;

推荐的腾讯云相关产品：