React Tiny Virtual List - 滚动到底部？

Question

尝试使用 https://github.com/clauderic/react-tiny-virtual-list 显示列表，因为没有它浏览器就会锁定。

我遇到的问题是我希望焦点停留在列表的底部并随着更多元素的添加而滚动。 "scrollToIndex" 和 "scrollToAlignment" 有选项，但我不知道如何使用它们。

虚拟列表代码非常简单，不言自明，有人知道如何使用滚动选项自动滚动到底部吗？

componentDidMount() {
    const socket = io.connect(process.env.REACT_APP_API_URL, { transports: ['websocket'] });
    socket.emit('onboarding', { id: uploadId });
    socket.on('transcript_log', function (resp) {
    if (resp.log !== undefined) {
        var currentList = this.state.transcriptList.slice();
        currentList.push(resp.log);
        this.setState({ transcriptList: currentList })
    }
}

render() {
    return (
    <VirtualList
        width='100%'
        height={280}
        itemCount={this.state.transcriptList.length}
        itemSize={20}
        renderItem={({index, style}) =>
          <div key={index} style={style}>
            {this.state.transcriptList[index]}
          </div>
        }
      />
    )
}

谢谢

Answer 1

试试这个

<VirtualList
    width='100%'
    height={280}
    itemCount={this.state.transcriptList.length}
    itemSize={20}
    scrollToIndex={this.state.index}
    scrollToAlignment='bottom'
    renderItem={({index, style}) =>
      <div key={index} style={style}>
        {this.state.transcriptList[index]}
      </div>
    }
  />

在父组件（呈现 VirtualList）上：

this.state={
    index: 0 //default to top of list 
}

scrollToBottom(){
   this.setState(() => {
       index: this.state.transcriptList.length - 1
   })
}

然后当您调用 scrollToBottom() 时，VirtualList 应该呈现在底部

Answer 2

很简单..

scrollToIndex={11}           <= Item index to scroll
scrollToAlignment="end"      <=the top of the container

Here is the example

React Tiny Virtual List - 滚动到底部？

React Tiny Virtual List - Scroll to bottom?

javascript

virtualization

reactjs