使用 CellMeasurer 反应虚拟化表未正确计算高度答案

【问题标题】：React Virtualized table with CellMeasurer is not calculating the height properly使用 CellMeasurer 反应虚拟化表未正确计算高度
【发布时间】：2019-06-18 13:34:57
【问题描述】：

我遇到了一个奇怪的问题。使用 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 的实现吗？任何帮助表示赞赏。提前致谢。

【问题讨论】：

标签： javascript reactjs redux react-virtualized

【解决方案1】：

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

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

【讨论】：