React-virtualized: Accessing VirtualScroll public methods when used with InfiniteLoader

Created on 9 Sep 2016  路  1Comment  路  Source: bvaughn/react-virtualized

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?

question

Most helpful comment

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>

>All comments

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>
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hyeminHwang picture hyeminHwang  路  3Comments

mikedevita picture mikedevita  路  3Comments

ellatrix picture ellatrix  路  3Comments

djeeg picture djeeg  路  3Comments

clauderic picture clauderic  路  3Comments