我尝试将 react-windowfixedSizeGrid
与react-infinite-loader
. 如前所述,infinite-loader 不支持用于无限加载的 fixedSizeGrid。所以我找到了onItemsRendered
覆盖方法。现在我正在尝试用它渲染数据并加载到滚动条上。但是当我滚动时我的数据没有加载。这是ThumbGrid
我传递数据和 fetchMore(graphql) 的组件的片段,即来自父组件的数据的总大小。谁能帮我解决这个问题。:
/*
* ThumbGrid Component
*
*/
<AutoSizer disableHeight>
{({ width }) => {
const columnCount = Math.floor(width / 175);
return (
<InfiniteLoad
isItemLoaded={isItemLoaded}
itemCount={100}
loadMoreItems={fetchMore}
>
{({ onItemsRendered, ref }: any) => {
const newItemsRendered = (gridData: any) => {
const useOverscanForLoading = true;
const {
visibleRowStartIndex,
visibleRowStopIndex,
visibleColumnStopIndex,
overscanRowStartIndex,
overscanRowStopIndex,
overscanColumnStopIndex
} = gridData;
const endCol =
(useOverscanForLoading || true
? overscanColumnStopIndex
: visibleColumnStopIndex) + 1;
const startRow =
useOverscanForLoading || true
? overscanRowStartIndex
: visibleRowStartIndex;
const endRow =
useOverscanForLoading || true
? overscanRowStopIndex
: visibleRowStopIndex;
const visibleStartIndex = startRow * endCol;
const visibleStopIndex = endRow * endCol;
onItemsRendered({
//call onItemsRendered from InfiniteLoader so it can load more if needed
visibleStartIndex,
visibleStopIndex
});
};
return (
<Grid
width={width}
height={height || 700}
columnWidth={105}
columnCount={columnCount}
itemData={{ list: data, columnCount }}
ref={ref}
innerElementType={innerElementType}
onItemsRendered={newItemsRendered}
rowCount={200}
rowHeight={264}
>
{({columnIndex, rowIndex, data, style}) => {
const { list, columnCount } = data;
const item = list[rowIndex * columnCount + columnIndex];
return item ? <ThumbCard style={style} {...item} /> : null;
}}
</Grid>
);
}}
</InfiniteLoad>
);
}}
</AutoSizer>
这是我的父组件:
export default function() {
....
function loadMore() {
fetchMore({
variables: {
offset: data.artist.albums.items.length,
limit: 10
},
updateQuery: {....}
});
}
return (<div className="album-cell cell-block">
<ThumbGrid
data={data.artist.albums.items}
height={1200}
total={data.artist.albums.total}
fetchMore={loadMore}
/>
</div>)
}