1

反応仮想化を開始し、InfiniteLoader->AutoSizer->VirtualScroller をセットアップしました。残念ながら、遅延ロードされた行はすぐに小道具を取得しません。props が null または未定義であるかのようにレンダリングします。それらを過ぎてスクロールしてからそれらに戻ると、それらは正しくレンダリングされます。また、最初にプリフェッチされた行を除いて、ゆっくりスクロールすると、すべての新しい行が正常にレンダリングされます。ただし、スクロール ホイールを飛ばすと、「サブレンダリングされた」行のセットに「着地」します。以下のコードを考えると、何が間違っていますか?

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