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

Question

我有几个并排的网格，对于第一个网格，我想使用 CellMeasurer 动态计算行高，如何在另一个网格中重用此网格中的 CellMeasurerCache（以同步单元格 heights/widths）？

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，左边的数据是"uneven"。

Answer 1

您不能在 Grid 之间直接共享 CellMeasurerCache 缓存，除非两个 Grid 中所有单元格的内容都相同（我怀疑情况是否如此).

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

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

react-virtualized share CellMeasurerCache for multiple Grids

react-virtualized