アクセス可能なコンポーネント: ページネーション

今日は、ページネーションを最初から作成し、アクセスして再利用できるようにする方法を見ていきます。お役に立てば幸いです。投稿の最後にコメントを残してください。

Github: https://github.com/micaavigliano/accessible-pagination
プロジェクト: https://accessible-pagination.vercel.app/

データを取得するためのカスタムフック

const useFetch = <T,>(url: string, currentPage: number = 0, pageSize: number = 20) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async() => {
      setLoading(true);
      setError(false);

      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('network response failed')
        }
        const result: T = await response.json() as T;
        setData(result)
      } catch (error) {
        setError(true)
      } finally {
        setLoading(false);
      }
    };

    fetchData()
  }, [url, currentPage, pageSize]);

  return {
    data,
    loading,
    error,
  }
};

1. ジェネリック型でカスタムフックを生成します。これにより、このフックを使用するときに予期されるデータのタイプを指定できるようになります
2. 3つのパラメータを待ちましょう。 1 つはデータを取得する url 用、currentPage は現在のページであり、デフォルトでは 0 、pageSize は数値です項目数はページごとに設定する予定で、デフォルトでは 20 です (この値は変更できます)。
3. 私たちの状態では const [data, setData] = useState(null);これをジェネリック型 T に渡します。これは、これをさまざまなデータ要求に使用すると、さまざまなタイプのデータが期待されるためです。

ページネーション

ページにアクセスするには、次の点を考慮する必要があります:

• フォーカスはページのすべてのインタラクティブ要素を移動し、目に見えるインジケーターが必要です
• スクリーン リーダーとの良好な対話を確保するには、領域、プロパティ、状態を正しく使用する必要があります
• ページはタグ内でグループ化され、ページ自体として識別する aria-label が含まれている必要があります。
• ページネーション内の各項目には、aria-setsize と aria-pointset が含まれている必要があります。さて、それらは何のためにあるのでしょうか？ aria-setsize は、ページネーション リスト内の項目の総数を計算するために使用されます。スクリーン リーダーは次のようにアナウンスします:

aria-pointset は、ページ上のすべての項目内の項目の位置を計算するために使用されます。スクリーン リーダーは次のようにアナウンスします:

• ボタンをクリックしたときにどのページに移動するかを識別できるように、各項目には aria-label が必要です。
• 次/前の要素に移動するボタンがあり、これらの各ボタンには対応する aria-label が必要です
• ページネーションに省略記号が含まれている場合は、aria-label で正しくマークする必要があります
• 新しいページに移動するたびに、スクリーン リーダーは次のように、現在どのページにいるのか、新しいアイテムがいくつあるかを通知する必要があります。

これを達成するために、次のようにコード化します:

const useFetch = <T,>(url: string, currentPage: number = 0, pageSize: number = 20) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async() => {
      setLoading(true);
      setError(false);

      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('network response failed')
        }
        const result: T = await response.json() as T;
        setData(result)
      } catch (error) {
        setError(true)
      } finally {
        setLoading(false);
      }
    };

    fetchData()
  }, [url, currentPage, pageSize]);

  return {
    data,
    loading,
    error,
  }
};

ページの読み込みが停止したら、currentPage と読み込み中の新しい配列の長さを使用して新しいメッセージを設定します。

それでは、はい！ファイル pagination.tsx

でコードがどのように構成されているかを見てみましょう。

コンポーネントには 5 つのプロップが必要です

const [statusMessage, setStatusMessage] = useState<string>("");

useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    if (!loading) {
      setStatusMessage(`Page ${currentPage} loaded. Displaying ${data?.near_earth_objects.length || 0} items.`);
    }
  }, [currentPage, loading]);

• currentPage は現在のページを参照します。次のように、ページネーションを使用するコンポーネント内でこれを処理します。 const [currentPage, setCurrentPage] = useState(1);
• totalPages は、API
に含まれる表示されるアイテムの総数を指します。
• nextPage この関数を使用すると、次のページに移動し、currentPage の状態を次のように更新できます。

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  nextPage: () => void;
  prevPage: () => void;
  goToPage: (page: number) => void;
}

• prevPage この関数を使用すると、現在のページの前のページに移動し、currentPage の状態を更新できます。

const handlePageChange = (newPage: number) => {
    setCurrentPage(newPage); 
  };

  const nextPage = () => {
    if (currentPage < totalPages) {
      handlePageChange(currentPage + 1);
    }
  };

• goToPage この関数には数値パラメーターが必要で、各アイテムが目的のページに移動できるようにする必要がある関数です。次のように動作させましょう。

const prevPage = () => {
    if (currentPage > 1) {
      handlePageChange(currentPage - 1);
    }
  };

ページネーションを有効にするには、リスト内で反復する配列を作成するという、もう 1 つのステップが必要です。そのためには、次の手順に従う必要があります:

1. 関数を作成します。この場合は getPageNumbers と呼びます。
2. リストの最初と最後の項目の変数を作成します。
3. 左側の省略記号の変数を作成します。私自身の決定により、省略記号はリストの 4 番目の要素の後に配置されます。
4. 右側の省略記号の変数を作成します。私自身の決定により、省略記号はリスト内の 3 つの項目の前に配置されます。
5. 現在のページ、前の 2 つの項目、および後続の 2 つの項目の 5 つの項目が常に中央に配置される配列を返す関数を作成します。必要に応じて、最初と最後のページを除外します const PagesAroundCurrent = [currentPage - 2, currentPage - 1, currentPage, currentPage 1, currentPage 2].filter(page => page > firstPage && page < lastPage);
6. 最後の変数として、以前に作成したすべての変数を含む配列を作成します。
7. 最後に、null 要素をフィルターで除外し、配列を返します。

この配列は、次のようにページ内の項目のリストを取得するために通過するものです:

const useFetch = <T,>(url: string, currentPage: number = 0, pageSize: number = 20) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async() => {
      setLoading(true);
      setError(false);

      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('network response failed')
        }
        const result: T = await response.json() as T;
        setData(result)
      } catch (error) {
        setError(true)
      } finally {
        setLoading(false);
      }
    };

    fetchData()
  }, [url, currentPage, pageSize]);

  return {
    data,
    loading,
    error,
  }
};

そして、再利用可能でアクセスしやすいページネーションを作成する方法は次のとおりです。私個人としては、ライブ コーディングでページを実装する必要があったため、ページの作成方法を一​​から学びました。私の経験があなたのキャリアに役立ち、実装して改善できることを願っています。

こんにちは、
マイカ

以上がアクセス可能なコンポーネント: ページネーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。