2

私は無限のリストを持っています（コンポーネントInfiniteLoaderを使用Listし、素晴らしい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から、行インデックスにスクロールするのが正しい方法だと思いました。

ご協力いただきありがとうございます。

4

1 に答える 1

2

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>
    )
  }
}
于 2016-12-13T16:37:22.393 に答える