반응 가상화로 무한 목록에서 색인으로 스크롤하는 방법

Question

나는 react-virtualized 라이브러리의 구성 요소 InfiniteLoader 및 List을 사용하여 무한한 목록을 가지고 있습니다. 사용자가 생성 한 이벤트에 응답하기 위해 특정 행으로 스크롤하고 싶습니다. 나는 scroll_to_week 메소드를 호출

Uncaught TypeError: this.list.scrollToRow is not a function 

:

class Weeks extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     week_count: 10, 
    } 
    auto_bind(this) 
    } 

    is_week_loaded(week) { 
    return week < this.state.week_count 
    } 

    load_more_weeks() { 
    this.setState({week_count: this.state.week_count + 1}) 
    } 

    scroll_to_week(week) { 
    if (this.state.week_count <= week) { 
     this.setState({week_count: week + 1}) 
    } 
    this.list.scrollToRow(week) 
    } 

    render_week({key, index, style}) { 
    return (
     <div key={key} style={style}> 
     <Week week={index}/> 
     </div> 
    ) 
    } 

    render() { 
    return (
     <AutoSizer> 
     {({height, width}) => (
      <InfiniteLoader 
      isRowLoaded={this.is_week_loaded} 
      loadMoreRows={this.load_more_weeks} 
      rowCount={this.state.week_count + 1} 
      > 
      {({onRowsRendered, registerChild}) => (
       <List 
       height={height} 
       width={width} 
       onRowsRendered={onRowsRendered} 
       ref={(list) => { 
        this.list = list 
        registerChild(list) 
       }} 
       rowCount={this.state.week_count} 
       rowHeight={row_height} 
       rowRenderer={this.render_week} 
       /> 
      )} 
      </InfiniteLoader> 
     )} 
     </AutoSizer> 
    ) 
    } 
} 

는 그러나, 나는 다음과 같은 오류가 발생합니다 :

이 내 코드입니다.

문서에서 https://github.com/bvaughn/react-virtualized/blob/master/docs/reverseList.md은 행 인덱스로 스크롤하는 올바른 방법이라고 생각했습니다.

도움 주셔서 감사합니다.

Answer 1

scrollToRow은 기능이 아니라 보조 기능입니다. =)

이 시도 :

class Weeks extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     week_count: 10, 
    } 
    auto_bind(this) 
    } 

    is_week_loaded(week) { 
    return week < this.state.week_count 
    } 

    load_more_weeks() { 
    this.setState({week_count: this.state.week_count + 1}) 
    } 

    scroll_to_week(week) { 
    if (this.state.week_count <= week) { 
     this.setState({ 
     scroll_to_week: week, 
     week_count: week + 1 
     }) 
    } 
    } 

    render_week({key, index, style}) { 
    return (
     <div key={key} style={style}> 
     <Week week={index}/> 
     </div> 
    ) 
    } 

    render() { 
    return (
     <AutoSizer> 
     {({height, width}) => (
      <InfiniteLoader 
      isRowLoaded={this.is_week_loaded} 
      loadMoreRows={this.load_more_weeks} 
      rowCount={this.state.week_count + 1} 
      > 
      {({onRowsRendered, registerChild}) => (
       <List 
       height={height} 
       width={width} 
       onRowsRendered={onRowsRendered} 
       ref={(list) => { 
        registerChild(list) 
       }} 
       rowCount={this.state.week_count} 
       rowHeight={row_height} 
       rowRenderer={this.render_week} 
       scrollToRow={this.state.scroll_to_week} 
       /> 
      )} 
      </InfiniteLoader> 
     )} 
     </AutoSizer> 
    ) 
    } 
}