如何测量反应虚拟化表中的单元格大小答案

【问题标题】：How to measure cell size in react virtualized table如何测量反应虚拟化表中的单元格大小
【发布时间】：2021-05-04 03:48:16
【问题描述】：

我正在尝试在反应虚拟化表中自动调整单元格。

这是表格：

<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>
    );
}

当我看到 List 指南时，我认为 cellRenderrer 应该在 Table 组件中，但它什么也没做。

如果我将 cellRenderrer 放在列组件中，它没有键和样式道具可以正常工作。

我该怎么办？

【问题讨论】：

标签： javascript reactjs react-virtualized