重新排列网格CellMeasurer时如何避免重新计算列宽？

问题描述

我正在使用一个反应虚拟化的Grid组件作为表格（固定行高，动态列宽）。该表可以排序，因此数据的顺序可以更改。但是，每次我对表格进行排序时，Grid似乎都会重新计算列宽，这需要2-5秒钟的响应时间。这是没有必要的，因为仅更改了顺序，而没有更改数据，因此先前的宽度仍然有效。我需要某种方式告诉Grid组件（或CellMeasurer组件）。

这是网格的代码：

      <AutoSizer>
        {({ height,width }) => (
          <Grid
            columnWidth={cache.columnWidth}
            deferredMeasurementCache={cache}
            cellRenderer={cellRendererGrid}
            height={height}
            width={width}
            columnCount={3}
            rowCount={orderedData.length}
            rowHeight={rowHeight}
          />
        )}
      </AutoSizer>

这是CellRendererGrid函数：

  function cellRendererGrid({ columnIndex,key,parent,rowIndex,style }) {
    let row = orderedData[rowIndex];
    let content;
    if (columnIndex === 0) content = row.score;
    else if (columnIndex === 1) content = row.deactivated;
    else content = row.keyword;

    return (
      <CellMeasurer
        cache={cache}
        columnIndex={columnIndex}
        key={key}
        parent={parent}
        rowIndex={rowIndex}
      >
        <div
          style={{
            ...style,whiteSpace: "Nowrap",}}
        >
          {columnIndex === 1
            ? deleteCellRenderer({ cellData: content,rowData: row })
            : cellRenderer({ columnIndex,cellData: content })}
        </div>
      </CellMeasurer>
    );
  }

orderedData是类型为对象的数组

[{keyword:'long text',score:number,deactivated:boolean},...]

和orderedData的顺序可以根据用户选择的种类而改变。我希望CellMeasurer避免在orderedData更改时重新计算列宽。

任何朝着正确方向提出的建议或建议都会受到赞赏。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）