react-virtualized：带有CellMeasurer的表列始终具有缓存高度

Question

我一直在尝试遵循DynamicHeightTableColumn示例，并使其适应我的用例。我在CellMeasurer demo中看到单行行具有默认高度，该高度是在初始化缓存时定义的。但是，就我而言，似乎单行行始终具有存储在缓存中的最高行高，而不是默认行高。

这是我的代码：

import * as React from 'react';
import * as Immutable from 'immutable';
import { Table, Column, AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';

interface Props {
    logs: Immutable.List<Immutable.Map<string, any>>;
    columns: (
        width: number
    ) => Array<{
        name: string;
        key: string;
        width: number;
        variableHeight?: boolean;
    }>;
}

export default class LogTable extends React.Component<Props, {}> {
    private cache: CellMeasurerCache;

    constructor(props) {
        super(props);

        this.cache = new CellMeasurerCache({
            defaultHeight: 20,
            fixedWidth: true,
            keyMapper: () => 1
        });
    }

    render() {
        const { logs } = this.props;

        return (
            <AutoSizer disableHeight>
                {({ width }) => (
                    <Table
                        headerHeight={20}
                        height={250}
                        rowCount={logs.size}
                        rowHeight={this.cache.rowHeight}
                        width={width}
                        overscanRowCount={2}
                        rowRenderer={this.rowRenderer}
                        headerClassName='col-header'
                        gridClassName='log-table-grid'
                        rowClassName='log-table-row'
                        className='log-table'
                        rowGetter={({ index }) => logs.get(index)}
                        deferredMeasurementCache={this.cache}>
                        {this.renderColumns(width)}
                    </Table>
                )}
            </AutoSizer>
        );
    }

    private renderColumns(width) {
        return this.props.columns(width).map(({ name, key, width, variableHeight }, idx) => {
            const props: any = {
                label: name,
                dataKey: key,
                width,
                key,
                className: 'column'
            };
            if (variableHeight) {
                props.cellRenderer = this.cellRenderer.bind(this, idx);
            }

            return <Column {...props} />;
        });
    }

    private rowRenderer(params) {
        const { key, className, columns, rowData, style } = params;

        if (!rowData) {
            return null;
        }

        return (
            <div className={className} key={key} style={style}>
                {columns}
            </div>
        );
    }

    private cellRenderer(colIndex, { dataKey, parent, rowIndex }) {
        const content = this.props.logs.get(rowIndex).get(dataKey);

        return (
            <CellMeasurer
                cache={this.cache}
                columnIndex={colIndex}
                key={dataKey}
                parent={parent}
                rowIndex={rowIndex}>
                <div style={{ whiteSpace: 'normal' }} title={content}>
                    {content}
                </div>
            </CellMeasurer>
        );
    }
}

这是输出（请参阅表中的第二行，该行的内容太高了）

我唯一的样式（较少）是以下内容，我认为不会导致这种行为

.log-table {
    font-size: 14px;

    .col-header {
        font-size: 15px;
        text-align: center;
    }

    .log-table-grid {
        outline: none;
        font-family: monospace;
    }

    .log-table-row {
        border-bottom: 1px solid gray;
        padding: 3px;
    }
}