Question

我遇到了一个奇怪的问题。使用CellMeasurer进行反应虚拟化的表格无法正确计算高度。

我的渲染函数看起来像这样：-

<Table
    deferredMeasurementCache={this._cache}
    className={mainClasses}
    width={500}
    height={500}
    headerHeight={headerHeight}
    rowHeight={this._cache.rowHeight}
    rowCount={dataList.length}
    sort={this.sort}
    sortBy={sortBy}
    sortDirection={sortDirection}
    rowGetter={({ index }) => dataList[index]}
    rowRenderer={this.rowRenderer}
    overscanRowCount={overscanRowCount}
    onRowClick={onRowClick}
>
    {
    columnsDef.map((item, index) => {
        if (index === 0) {
            return (
                <Column
                    key={item.dataKey}
                    dataKey={item.dataKey}
                    width={25}
                    cellRenderer={this.checkboxCellRenderer}
                    disableSort={!this.isSortEnabled(item)}
                    headerRenderer={this.checkBoxHeaderRenderer}
                />
                        );
                    }

                    return (
                        <Column
                            key={item.dataKey}
                            dataKey={item.dataKey}
                            width={item.width ? item.width : 0}
                            label={item.label}
                            cellRenderer={this.dynamicCellRenderer}
                            disableSort={!this.isSortEnabled(item)}
                            headerRenderer={this.headerRenderer}
                            flexGrow={item.flexGrow}
                        />
                    );
                })
            }
</Table>

我的动态单元格渲染器功能如下：-

dynamicCellRenderer = (data) => {
    return (
        <CellMeasurer
            cache={this._cache}
            columnIndex={0}
            key={data.cellData}
            parent={data.parent}
            rowIndex={data.rowIndex}
        >
            <div
                style={{
                    whiteSpace: 'normal'
                }}
            >
                {data.cellData}
            </div>
        </CellMeasurer>
    );
}

我在构造函数中定义了缓存：-

constructor(props) {
    super(props);

    this._cache = new CellMeasurerCache({ minHeight: props.rowHeight, fixedWidth: true });
}

任何人都可以帮助我解决我的问题。我是否缺少实施CellMeasurer的功能？任何帮助表示赞赏。提前致谢。

Answer 1

我有同样的问题。我认为问题是因为每个单元格的高度是在加载内容之前计算出来的。我使用了CellMeasurer的参数measure，并在加载内容时调用

<CellMeasurer
    cache={cache}
    columnIndex={0}
    key={key}
    parent={parent}
    rowIndex={index}
    width={width}
  >
    {({measure}) => (
      <Content onLoad={measure} />
    )}
  </CellMeasurer>

使用CellMeasurer的React Virtualized表无法正确计算高度

1 个答案: