Im trying to use VirtualScroll, and InfiniteLoader together with CellMeasurer and AutoSizer. The problem I have is that I need to update the rows height after fetching some data (theres no way of knowing how tall it would be before hand), and I need to call recomputeRowHeights but for this I need to have a reference to the VirtualScroll which I cant cause im passing the registerChild from InfiniteLoader to the ref.
<InfiniteLoader
isRowLoaded={this._isRowLoaded}
loadMoreRows={this._loadMoreRows}
rowCount={itemsCount}
>
{({ onRowsRendered, registerChild }) => (
<AutoSizer>
{({ width, height }) => (
<CellMeasurer
cellRenderer={this._renderItem}
columnCount={1}
rowCount={itemsCount}
>
{({ getRowHeight, resetMeasurementForRow }) => {
this._resetMeasurementForRow = resetMeasurementForRow;
return (
<VirtualScroll
ref={registerChild}
height={height}
width={width}
rowCount={itemsCount}
rowHeight={getRowHeight}
rowRenderer={this._rowRenderer}
onRowsRendered={onRowsRendered}
/>
);
}}
</CellMeasurer>
)}
</AutoSizer>
)}
</InfiniteLoader>
_renderItem () {
...
this._resetMeasurementForRow(rowIndex);
this.ref.VirtualScroll.recomputeRowHeights(rowIndex); //cant reference it
...
}
Is this scenario supported?
You can store a reference to VirtualScroll like so:
<InfiniteLoader {...props}>
{({ onRowsRendered, registerChild }) => (
<AutoSizer>
{({ width, height }) => (
<CellMeasurer {...props}>
{({ getRowHeight, resetMeasurementForRow }) => {
this._resetMeasurementForRow = resetMeasurementForRow;
return (
<VirtualScroll
{...props}
ref={(ref) => {
// Save it for yourself for later
this._virtualScroll = ref
// Pass it on to InfiniteLoader as well
registerChild(ref)
}}
/>
);
}}
</CellMeasurer>
)}
</AutoSizer>
)}
</InfiniteLoader>
Most helpful comment
You can store a reference to
VirtualScrolllike so: