Как прокрутить до индекса в бесконечном списке с помощью virtual-virtualized

Question

У меня есть бесконечный список (с использованием компонентов InfiniteLoader и List из библиотеки awesome react-virtualized). Я хочу прокрутить до определенной строки, чтобы ответить на событие, созданное пользователем.

Это мой код:

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> 
    ) 
    } 
} 

Однако, я получаю следующее сообщение об ошибке:

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

, когда я вызываю метод scroll_to_week.

Я подумал из документации 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> 
    ) 
    } 
}