多个网格的反应虚拟化共享 CellMeasurerCache答案

【问题标题】：react-virtualized share CellMeasurerCache for multiple Grids多个网格的反应虚拟化共享 CellMeasurerCache
【发布时间】：2018-01-22 17:42:09
【问题描述】：

我有几个并排的网格，首先我想使用 CellMeasurer 动态计算行高，如何在另一个网格中重用 CellMeasurerCache（同步单元格高度/宽度）？

jsbin example

class App extends React.Component {
  constructor(props) {
    super(props);

    this.leftHeadersCellMeasurerCache = new CellMeasurerCache({
      fixedWidth: true,
      minHeight: 40
    });
  }

  render() {
    return (
      <ScrollSync>
        {({scrollTop, onScroll}) => (
          <div className="row">
            <LeftGrid
              width={300}
              height={500}
              scrollTop={scrollTop}
              cellMeasurerCache={this.leftHeadersCellMeasurerCache}
            />
            <DataGrid
              width={400}
              height={500}
              onScroll={onScroll}
              rowHeight={this.leftHeadersCellMeasurerCache.rowHeight}
            />
          </div>
        )}
      </ScrollSync>
    )
  }
}

PS。很遗憾不能使用 MultiGrid，左侧的数据“不均匀”。

【问题讨论】：

标签： react-virtualized

【解决方案1】：

您不能直接在Grids 之间共享CellMeasurerCache 缓存，除非两个Grids 中的所有单元格的内容都相同（我怀疑这种情况永远不会发生）。

我想你会想要装饰CellMeasurerCache in a similar way as MultiGrid does。您的装饰器需要决定何时按原样传递值以及何时添加列偏移以避免破坏测量。

【讨论】：