代码之家 › 专栏 › 技术社区 › Victor

React虚拟化砖石结构不使用浏览器调整大小

react-virtualized reactjs

Victor · 技术社区 · 7 年前

我正在尝试建立一个饲料(一个品脱最像饲料放直)。我正在使用 react-virtualized 砌体构件。

您可以看到当浏览器窗口在 this 屏幕录制。

然而,我的有一个奇怪的行为,正如你在 this 屏幕录制。

以下是我的代码的相关摘录:

export default class Feed extends Component <PropTypes, State> {
  static readonly defaultProps = {
    enableInfiniteScroll: false,
    chunkSize: 9,
  };

  private _windowScroller: WindowScroller;
  private _masonry: Masonry;
  private _columnCount: number;

  private _cache: CellMeasurerCache;
  private _cellPositioner: Positioner;

  constructor(props: PropTypes) {
    super(props);

    // ...

    this._columnCount = 3;

    this._cache = new CellMeasurerCache({
      defaultWidth: COLUMN_WIDTH,
      defaultHeight: 400,
      fixedWidth: true,
    });
    this._cellPositioner = createMasonryCellPositioner({
      cellMeasurerCache: this._cache,
      columnCount: this._columnCount,
      columnWidth: COLUMN_WIDTH,
      spacer: GUTTER,
    });
  }

  onResize({width}: Size) {
    this._cache.clearAll();
    this.calculateColumnCount(width);
    this.resetCellPositioner();
    this._masonry.recomputeCellPositions();
  }

  cellRenderer(cellProps: MasonryCellProps) {
    const {items} = this.state;
    const listing = items.get(cellProps.index);

    return (
      <CellMeasurer
        cache={this._cache}
        index={cellProps.index}
        key={cellProps.key}
        parent={cellProps.parent}
      >
        <div style={cellProps.style}>
          <ListingCard company={listing} />
        </div>
      </CellMeasurer>
    );
  }

  calculateColumnCount(width: number) {
    this._columnCount = Math.floor((width + GUTTER) / (COLUMN_WIDTH + GUTTER));
  }

  resetCellPositioner() {
    this._cellPositioner.reset({
      columnCount: this._columnCount,
      columnWidth: COLUMN_WIDTH,
      spacer: GUTTER,
    });
  }

  render() {
    const {items, isLoading, hasMore} = this.state;

    return (
      <div className={Styles['listings-feed']}>
        <WindowScroller scrollElement={window} ref={this.setRef}>
          {({height, isScrolling, onChildScroll, scrollTop, registerChild}) => (
            <div className={Styles.windowScrollerContainer}>
              <AutoSizer disableHeight onResize={this.onResize}>
                {({width}) => (
                  <div ref={registerChild as any}>
                    <Masonry
                      cellCount={items.size}
                      cellMeasurerCache={this._cache}
                      cellPositioner={this._cellPositioner}
                      cellRenderer={this.cellRenderer}
                      height={height}
                      width={width}
                      autoHeight
                      ref={(r: Masonry) => this._masonry = r}
                    />
                  </div>
                )}
              </AutoSizer>
            </div>
          )}
        </WindowScroller>
      </div>
    );
  }
}

1 回复 | 直到 7 年前

Victor 7 年前

在使用不同的参数和调整进行测试之后,我发现并没有呈现所有的项目,因为它们在技术上超出了范围(不在用户的视图中)。它们在滚动时没有消失,只是 <Masonry />

因为我用的是 <WindowScroller /> scrollTop children 函数,因此我直接将此传递给 Masonry

<WindowScroller scrollElement={window} ref={this.setRef}>
  {({height, isScrolling, onChildScroll, scrollTop, registerChild}) => (
    <div className={Styles.windowScrollerContainer}>
      <AutoSizer disableHeight onResize={this.onResize}>
        {({width}) => (
          <div ref={registerChild as any}>
            <Masonry
              cellCount={items.size}
              cellMeasurerCache={this._cache}
              cellPositioner={this._cellPositioner}
              cellRenderer={this.cellRenderer}
              height={height}
              width={width}
              autoHeight
              ref={(r: Masonry) => this._masonry = r}
              scrollTop={scrollTop}
            />
          </div>
        )}
      </AutoSizer>
    </div>
  )}
</WindowScroller>