如何使用反应虚拟化滚动到无限列表中的索引

Question

我有一个无限列表（使用来自很棒的 react-virtualized 库的组件 InfiniteLoader 和 List）。我想滚动到特定行以响应用户生成的事件。

这是我的代码：

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