React Virtualized table с CellMeasurer неправильно вычисляет высоту

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 и вызываю его при загрузке содержимого.

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