まず、以下の手順に従ってReactコンポーネントを作成します。
-
Reactプロジェクトをセットアップします。必要な依存関係をインストールし、プロジェクトの基本的な構造を作成します。
-
コンポーネント内にデータを格納するための状態変数を作成します。例えば、
dataという状態変数を定義します。 -
コンポーネントがマウントされた時点で、初期データを取得するためのAPIリクエストを行います。このデータは、最初のページのコンテンツとして表示されます。取得したデータを
data状態変数に保存します。 -
「Load More」ボタンを作成し、クリックイベントハンドラを設定します。このハンドラは、さらにデータを取得し、既存のデータに追加します。
以下は、上記手順のコード例です。
上記の例では、fetchData関数内でAPIリクエストを行い、取得したデータをsetDataを使用して状態変数に保存しています。loadMore関数は、「Load More」ボタンがクリックされたときに実行され、追加のデータを取得し、既存のデータに追加します。
このように実装すると、ユーザーが「Load More」ボタンをクリックするたびに、追加のデータが読み込まれ、表示されます。ページネーションの一部として、ユーザーがコンテンツをスクロールせずに追加で読み込むことができるようになります。
以上がReactで「Load More」ボタンを実装する方法です。この方法を使用すると、ユーザーがコンテンツを効果的に管理できるようになります。