reactjs - 在使用 autosizer 和 cellmeasurer 进行 react 虚拟化时滚动到底部/行

Question

我正在构建一个聊天应用程序并使用 react-virtualized 来管理聊天消息的显示/无限加载(通过自定义方法，而不是 HOC)。我正在使用 Autosizer 来填充容器 div，并使用 cellmeasurer 来计算行高。一切都很好，除了当我试图向下滚动到列表底部的最后一条/最新消息时，它把我带到了那里。通常，底部行的旁边是可见的，我需要再向下滚动一点才能看到实际的底部行。

以下是相关的片段:

渲染方法:

render() {
    const hasNextPage = this.props.contact ? this.props.contact.messages.length < this.props.contact.totalMessageCount : false
    // const totalMessageCount = this.props.contact ? this.props.contact.totalMessageCount : 0
    const contactMessages = this.props.contact ? sortBy(this.props.contact.messages, "created_at") : []
    const rowCount = contactMessages.length // hasNextPage ? contactMessages.length + 1 : contactMessages.length

    // auto resizer copy-spiration
    // https://github.com/bvaughn/tweets/blob/37d0139736346db16b9681d5b859a4e127964518/src/components/TweetList.js#L126-L132
    const _rowRenderer = ({ index, key, parent, style }) => {
      let content;
      if (index === 0 && hasNextPage) {
        content = 'Loading...'
      } else {
        content = <ChatMessage message={contactMessages[index]} />
      }

      return (
        <CellMeasurer
          cache={this._cache}
          columnIndex={0}
          key={key}
          parent={parent}
          rowIndex={index}
          width={this._mostRecentWidth}
        >
          <div
            key={key}
            style={style}
          >
            {content}
          </div>
        </CellMeasurer>
      );
    };

    return (
      <div style={{ height: '65vh' }}>
        <AutoSizer>
          {({ height, width }) => (
            <List
              deferredMeasurementCache={this._cache}
              // eslint-disable-next-line no-return-assign
              ref={ref => this.chatWindow = ref}
              onRowsRendered={(renderData) => this.handleRowsRendered(renderData, hasNextPage, rowCount)}
              rowRenderer={_rowRenderer}
              height={height}
              width={width}
              rowHeight={this._cache.rowHeight}
              rowCount={rowCount}
            />
          )}
        </AutoSizer>

      </div>
    )
  }

我调用 componentDidUpdate 滚动:

componentDidUpdate() {
    if (this.chatWindow && !this.state.initialized && this.props.contact) {
      // this.chatWindow.recomputeRowHeights(this.props.contact.messages.length - 10)
      this.chatWindow.scrollToRow(this.props.contact.messages.length || 0)
    }
  }

有什么想法可以实现该列表的少量滚动以使底部消息可见吗？

Answer 1

我在 List 中遇到了同样的问题，通过使用 hack 将 estimatedRowSize 参数设置为我的平均行大小值解决了这个问题。

<List     
 rowHeight={this.getRowHeight}
 rowRenderer={this.rowRenderer}
 onRowsRendered={this.onRowsRendered}
 rowCount={totalRows}
 // Row size It may vary in my case it is 44.5. 
 // Also it doesnt need to be exact.
 //Approx value will work but estimated row size should not be less than actual row height. 
 estimatedRowSize={44.5}
 overscanRowCount={10}
 height={height}
 width={width}
/>