Question

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

我遇到的问题是我希望焦点保持在列表的底部并随着更多元素的添加而滚动。有＆＃34; scrollToIndex＆＃34;的选项。和＆＃34; scrollToAlignment＆＃34;但是我无法解决如何使用它们的问题。

虚拟列表代码非常简单且不言自明，是否有人了解如何使用滚动选项自动滚动到底部？

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

这很简单..

System.out.println(ArrayToB[3].getTypeOfBody());

Here is the example

React Tiny Virtual List - 滚动到底部？

2 个答案: