javascript - 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应该呈现在底部