如何將反應砌體與反應無限卷軸一起使用？

Question

我有一個將無限滾動的圖像列表，當我點擊頁面底部時，加載更多。

我用過這個組件： https : //github.com/CassetteRocks/react-infinite-scroller

它適用於一系列圖像。

對於下一步，我想制作一個帶有一些文本的圖像網格。 因此，盒子的高度將是可變的。 此外，如果有一個網格，我可以將多個盒子排成一行，那就太好了。

為此，我如何使用 react masonry ( https://github.com/eiriklv/react-masonry-component ) 或 ( https://react.rocks/example/react-infinite-grid )？ react-infinite-grid 是否處理可變高度塊？

這是我現在擁有的代碼片段：

        <InfiniteScroll
            pageStart={0}
            loadMore={this.props.onInfiniteLoad}
            hasMore={this.props.hasNextPage}
            loader={<div>{'Loading ...'}</div>}>
            {this.getSearchResultList()}
        </InfiniteScroll>

Answer 1

現在，我認為我們可以做到這一點。 ( https://www.npmjs.com/package/react-masonry-infinite )

演示頁面

1.安裝

npm install --save react-masonry-infinite

2. 使用

import MasonryInfiniteScroller from 'react-masonry-infinite';

...
        <MasonryInfiniteScroller
            pageStart={0}
            loadMore={this.props.onInfiniteLoad}
            hasMore={this.props.hasNextPage}
            loader={<div>{'Loading ...'}</div>}>
            {this.getSearchResultList()}
        </MasonryInfiniteScroller>