如何在react虚拟化表中测量单元格大小

import React from 'react';
import { Table, AutoSizer } from 'react-virtualized';

const MyTable = () => {
  // 表格数据和列定义
  const data = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    // ...
  ];

  const columns = [
    { dataKey: 'id', label: 'ID' },
    { dataKey: 'name', label: 'Name' },
    { dataKey: 'age', label: 'Age' },
    // ...
  ];

  // 渲染表格行
  const rowRenderer = ({ index, key, style }) => {
    const item = data[index];

    return (
      <div key={key} style={style}>
        {columns.map(column => (
          <div key={column.dataKey}>
            {item[column.dataKey]}
          </div>
        ))}
      </div>
    );
  };

  return (
    <AutoSizer>
      {({ width, height }) => (
        <Table
          width={width}
          height={height}
          headerHeight={30}
          rowHeight={30}
          rowCount={data.length}
          rowGetter={({ index }) => data[index]}
          rowRenderer={rowRenderer}
          columns={columns}
        />
      )}
    </AutoSizer>
  );
};

export default MyTable;

import React, { useRef, useState, useEffect } from 'react';
import { Table, AutoSizer } from 'react-virtualized';

const MyTable = () => {
  const tableRef = useRef(null);
  const [cellSize, setCellSize] = useState({});

  // 测量单元格大小
  const measureCellSize = () => {
    const rowElement = tableRef.current.querySelector('.ReactVirtualized__Table__row');
    const cellElement = rowElement.querySelector('.ReactVirtualized__Table__rowColumn');
    
    if (cellElement) {
      const { width, height } = cellElement.getBoundingClientRect();
      setCellSize({ width, height });
    }
  };

  // 更新单元格大小
  useEffect(() => {
    if (tableRef.current) {
      measureCellSize();
    }
  }, []);

  // 渲染表格行
  const rowRenderer = ({ index, key, style }) => {
    const item = data[index];

    return (
      <div key={key} style={style}>
        {columns.map(column => (
          <div key={column.dataKey}>
            {item[column.dataKey]}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div ref={tableRef}>
      <AutoSizer>
        {({ width, height }) => (
          <Table
            width={width}
            height={height}
            headerHeight={30}
            rowHeight={30}
            rowCount={data.length}
            rowGetter={({ index }) => data[index]}
            rowRenderer={rowRenderer}
            columns={columns}
          />
        )}
      </AutoSizer>
      <div>
        Cell Size: {cellSize.width}px x {cellSize.height}px
      </div>
    </div>
  );
};

export default MyTable;