1

我刚开始使用 react-virtualized 并设置了 InfiniteLoader->AutoSizer->VirtualScroller。不幸的是，延迟加载的行并没有立即得到它们的道具。它们呈现好像道具为空或未定义。如果我滚动过去然后滚动回它们，它们就会正确呈现。此外，除了最初的预取行之外，如果我慢慢滚动，所有新行都可以呈现。但是，如果我让滚轮飞起来，它将“降落”在一组“子渲染”行上。鉴于下面的代码，我做错了什么？

import React, { PropTypes } from 'react'
import { stitch } from 'keo'
import CSSModules from 'react-css-modules'
import css from './component.scss'
import R from 'ramda'
import { Divider, Paper } from 'material-ui'
import { AutoSizer, InfiniteLoader, VirtualScroll } from 'react-virtualized'
import 'react-virtualized/styles.css'
import Row from 'components/Row'

let list = R.repeat({score: 100, volume: 999}, 10)

function isRowLoaded ({ index }) {
  return !!list[index]
}

function loadMoreRows ({ startIndex, stopIndex }) {
  // fake loading
  list = R.insertAll(startIndex, R.repeat({score: 100, volume: 999}, stopIndex - startIndex), list)
  return Promise.resolve()
}

const render = ({ props }) => (
    <div>
      <Paper zDepth={2}>
        <Paper zDepth={2}>
        </Paper>
        <div>
          <InfiniteLoader
            isRowLoaded={isRowLoaded}
            loadMoreRows={loadMoreRows}
            rowCount={1000}
          >
            {({ onRowsRendered, registerChild }) => (
              <AutoSizer>
                {({ height, width }) => (
                  <VirtualScroll
                    ref={registerChild}
                    width={width}
                    height={height}
                    rowCount={1000}
                    rowHeight={72}
                    onRowsRendered={onRowsRendered}
                    rowRenderer={
                      ({ index }) =>
                        <div>
                          <Row {...list[index]} />
                          <Divider />
                        </div>
                    }
                  />
                )}
              </AutoSizer>
            )}
          </InfiniteLoader>
        </div>
      </Paper>
    </div>
  )

export const View = CSSModules(stitch({ render }), css)
4

0 回答 0