작은 가상 목록 반응 - 아래로 스크롤 하시겠습니까?

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