単純な無限荷重V 1が反応する🎉

react-window 素晴らしいツールですが、無限の読み込みリストを実装するときに少し冗長です.こちらがexample . react-simple-infinite-loading コードの複雑さを扱うコンポーネントです.からの3つのライブラリのラッパですBrian Vaughn :

react-window 効率的に大きなリストを表示します.それは目に見える要素と再利用ノードのコンポーネントを作成します.

react-window-infinite-loader ユーザーがリストをスクロールしている時だけ、要素をロードします

react-virtualized-auto-sizer それがその親コンテナで利用できるスペースに合うように、あなたはあなたのリストを表示するのを助けます.

V 1はアウトです！

コンポーネントには、完全な機能セットがあります.

ユーザーのスクロールとして項目を読み込む

内部メソッドを使用してプログラムをスクロールするか、キャッシュアイテムをリセットします

デフォルトのスクロールバースタイルをオーバーライドする

用途

最小限の例を見てみましょう.

import React from 'react'

import InfiniteLoading from 'react-simple-infinite-loading'

function Example({ items, fetchMore, hasMore }) {
  return (
    <div style={{ width: 300, height: 300 }}>
      <InfiniteLoading
        hasMoreItems={hasMore}
        itemHeight={40}
        loadMoreItems={fetchMore}
      >
        {items.map(item => <div key={item}>{item}</div>)}
      </InfiniteLoading>
    </div>
  )
}

react-simple-infinite-loading つのプロパティが必要です

子供たち:それはJSXノードの配列でなければなりません.

HasmoreItems :このプロパティは、ユーザーがリストの最後に到達したかどうかを判断します.

iTemheight :レンダリングされる要素の数を最適化し、より多くの行をロードする必要があるかどうかを判断するのは必須です.

LoadMoreItems :複数の行を読み込む必要がある場合にコンポーネントがコールするコールバック関数です.

秀秀loadMoreItems それがあなたの文脈に依存するので、目的に関する機能実装.これはFETCHコール、GraphSQLクエリ、データベースアクセス、何でも好きです.を使用する完全な例を見ることができますStar Wars API にdocumentation .

デフォルトのスクロールバースタイルをオーバーライドする

react-simple-infinite-loading 用途react-custom-scrollbars ネイティブのスクロールバースタイルをオーバーライドします.あなたは小柱を追加する必要がありますcustomScrollbar を有効にする.

import React from 'react'

import InfiniteLoading from 'react-simple-infinite-loading'

function Example({ items, fetchMore, hasMore }) {
  return (
    <div style={{ width: 300, height: 300 }}>
      <InfiniteLoading
        hasMoreItems={hasMore}
        itemHeight={40}
        loadMoreItems={fetchMore}
        customScrollbar
      >
        {items.map(item => <div key={item}>{item}</div>)}
      </InfiniteLoading>
    </div>
  )
}

より多くの行をロードしながらプレースホルダを表示する

あなたはplaceholder ローディング中に表示されるプロパティ.デフォルトでは、リストの最後に追加行を追加しますplaceholder ノードの内容.

import React from 'react'

import InfiniteLoading from 'react-simple-infinite-loading'

function Example({ items, fetchMore, hasMore }) {
  return (
    <div style={{ width: 300, height: 300 }}>
      <InfiniteLoading
        hasMoreItems={hasMore}
        itemHeight={40}
        loadMoreItems={fetchMore}
        placeholder={<div>Loading...</div>}
      >
        {items.map(item => <div key={item}>{item}</div>)}
      </InfiniteLoading>
    </div>
  )
}

ロードされる行でプレースホルダを持ちたい場合は、オプションのプロパティを指定する必要がありますitemsCount (事前に行の数を知っていれば動作します).がある場合は、より細かい粒度の実装をする必要がありますloadMoreItems コールバック.この関数は、読み込まれる必要がある行の開始インデックスと終了インデックスをパラメータとして受け取ります.

内部メソッドの呼び出し

react-window and react-window-infinite-loader プログラムのリストを操作するいくつかのメソッドを公開します.あなたはREFを介してそれを使用することができます.
次の3つのメソッドにアクセスできます.

scrollto ( scrolloffset : number ): void -指定したオフセットにスクロールする.

ScrollToItem ( index : number , align : string ="auto "): void -指定した項目にスクロールします.

resetloadmoreItemSCACHE () : void -キャッシュから以前に読み込まれた項目をクリアします.

ここでは、scrollTo メソッド.

function Example({ items, fetchMore, hasMore }) {
  const ref = React.useRef()
  const scrollToTop = () => {
    if (ref.current) {
      ref.current.scrollTo(0)
    }
  }

  return (
    <>
      <button onClick={scrollToTop}>Scroll to top</button>
      <div style={{ width: 300, height: 300 }}>
        <InfiniteLoading
          hasMoreItems={hasMore}
          itemHeight={40}
          loadMoreItems={fetchMore}
          ref={ref}
        >
          {items.map(item => <div key={item}>{item}</div>)}
        </InfiniteLoading>
      </div>
    </>
  )
}

あなたが興味を持っている場合はそれを試してみること自由に感じなさい!
リポジトリhttps://github.com/frinyvonnick/react-simple-infinite-loading
フィードバックと貢献🙏 何か質問があればツイートしてください!
それが助けを望む!