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

Question

我正在尝试在react-虚拟化表中自动设置单元格大小。

表格如下:

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

这里是cellRenderer:

function cellRenderer(props) {
console.log(props);
return (
<CellMeasurer cache={cache} columnIndex={props.columnIndex} parent={props.parent} rowIndex={props.rowIndex}>
<div>{props.cellData}</div>
</CellMeasurer>
);
}

当我看到列表指南时，我认为cellrenderer应该在表组件中，但它什么也不做。

如果我把cellrenderer放在列组件中，它没有键和样式道具来正确工作。

我该怎么办?

Answer 1

我从例子中解决了我的问题:https://github.com/bvaughn/react-virtualized/blob/e360d958b99fa965fd3f1caed4506403ad652cd3/source/CellMeasurer/CellMeasurer.DynamicHeightTableColumn.example.js