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

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 は現(xiàn)在のページであり、デフォルトでは 0 、pageSize は數(shù)値です項目數(shù)はページごとに設(shè)定する予定で、デフォルトでは 20 です (この値は変更できます)。
3. 私たちの狀態(tài)では const [data, setData] = useState(null);これをジェネリック型 T に渡します。これは、これをさまざまなデータ要求に使用すると、さまざまなタイプのデータが期待されるためです。

ページネーション

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

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

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

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

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

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 と読み込み中の新しい配列の長さを使用して新しいメッセージを設(shè)定します。

それでは、はい！ファイル 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 は現(xiàn)在のページを參照します。次のように、ページネーションを使用するコンポーネント內(nèi)でこれを処理します。 const [currentPage, setCurrentPage] = useState(1);
• totalPages は、API
に含まれる表示されるアイテムの総數(shù)を指します。
• nextPage この関數(shù)を使用すると、次のページに移動し、currentPage の狀態(tài)を次のように更新できます。

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

• prevPage この関數(shù)を使用すると、現(xiàn)在のページの前のページに移動し、currentPage の狀態(tài)を更新できます。

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

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

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

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

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

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

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

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,
  }
};

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

こんにちは、
マイカ

以上がアクセス可能なコンポーネント: ページネーションの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。