React-Virtualized InfiniteLoader滞后于将道具传递给渲染的行

时间:2016-08-06 00:54:50

标签: react-virtualized

我刚开始使用react-virtualized并设置了InfiniteLoader-> AutoSizer-> VirtualScroller。不幸的是,延迟加载的行不会立即得到它们的道具。它们呈现为好像道具为null或未定义。如果我滚过它们然后滚动回它们,它们会正确呈现。另外,除了初始预取的行之外,如果我慢慢滚动,所有新行都可以渲染。但是,如果我发送滚轮飞行,它将会降落#34;在一组"子渲染"行。鉴于下面的代码,我做错了什么?

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)

0 个答案:

没有答案