[英]react-window fixedSizeGrid with react-window-infinite-loader
I tried to use react-window's fixedSizeGrid
with react-infinite-loader
.我尝试将 react-window 的
fixedSizeGrid
与react-infinite-loader
。 As mentioned it's issue, infinite-loader does not support fixedSizeGrid for the infinite load.如前所述,这是一个问题,无限加载器不支持无限加载的 fixedSizeGrid 。 So i found
onItemsRendered
override method.所以我找到了
onItemsRendered
覆盖方法。 Now i am trying to render data with it and load on the scroll.现在我试图用它渲染数据并加载到滚动条上。 But my data is not loading when i scroll.
但是当我滚动时我的数据没有加载。 Here is the snippet of my
ThumbGrid
component I passed data and fetchMore(graphql), total size of my data from the parent component.这是我的
ThumbGrid
组件的片段,我传递了数据和 fetchMore(graphql),这是来自父组件的数据的总大小。 Can anyone please help me to solve this.:任何人都可以帮我解决这个问题。:
/*
* 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>
And here is my Parent component:这是我的父组件:
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>)
}
So i finally achieved with help of Gerrit.所以我终于在 Gerrit 的帮助下实现了。 I should have pass prop's
loadMore
function directly to fetchMore
method and should pass style
into ThumbCard
.我应该将 prop 的
loadMore
函数直接传递给fetchMore
方法,并且应该将style
传递给ThumbCard
。 Also confusing one was i was trying to make a demo with codesandbox, it should show some mock data then it must use states.同样令人困惑的是我试图用代码和盒子制作一个演示,它应该显示一些模拟数据然后它必须使用状态。 I passed it down to ThumbGrid so updated data will trigger ThumbGrid to re-render.
我将它传递给 ThumbGrid,因此更新的数据将触发 ThumbGrid 重新渲染。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.