如何使用react-virtualized实现自动跟踪

Question

我在react-virtualized中使用List和WindowScroller来显示日志。似乎没有很好的方法来实现自动跟随。使用scrollToIndex滚动到底部似乎很容易。但是很难知道我们是否在页面的底部。document.body.clientHeight比WindowScroller提供的scrollTop小得多。我们如何实现这个特性呢？谢谢。

Answer 1

当他的值等于您的行数时，您可以使用属性"scrollToIndex“

  render(): React.Element<AutoSizer> {
const { data, ...otherProps } = this.props;
return (
  <AutoSizer onResize={this.onResizeHandler}>
    {({ width, height }) => (
      <List
        {...otherProps}
        deferredMeasurementCache={this.cache}
        rowHeight={this.cache.rowHeight}
        rowCount={data.length}
        forceUpdateGrid={data}
        rowRenderer={this.rowRenderer}
        scrollToIndex={data.length - 1}
        onScroll={this.onScrollHandler}
        height={height}
        width={width}
      />
    )}
  </AutoSizer>
);

}