使用 autosizer 和 cellmeasurer 滚动到 react-virtualized 的底部/行答案

【问题标题】：scroll to bottom/row on react-virtualized with autosizer and cellmeasurer使用 autosizer 和 cellmeasurer 滚动到 react-virtualized 的底部/行
【发布时间】：2018-02-09 17:30:40
【问题描述】：

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

这里是相关的sn-ps：

渲染方法：

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)
    }
  }

任何想法如何实现该列表的少量滚动以使底部消息可见？

【问题讨论】：

你能把它放在 CodeSandbox 或某个我可以完整查看的地方吗？（我可以在浏览器中运行，不需要结帐步骤。）
你解决了吗？我在这里遇到了同样的问题。
@marman 看看我的答案。

标签： reactjs react-virtualized

【解决方案1】：

我在List 中遇到了同样的问题，通过使用将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}
/>

【讨论】：