今天我們將了解如何從頭開始建立分頁並使其可存取和可重複使用。希望對(duì)您有幫助，歡迎在文末留言評(píng)論！

Github：https://github.com/micaavigliano/accessible-pagination
項(xiàng)目：https://accessible-pagination.vercel.app/

自訂鉤子來獲取數(shù)據(jù)

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. 我們將產(chǎn)生一個(gè)具有通用類型的自訂鉤子。這將允許我們指定使用此鉤子時(shí)期望的資料類型
2. 讓我們等待3個(gè)參數(shù)。一個(gè)用於url，我們將在其中獲取數(shù)據(jù)，currentPage 是我們所在的頁面，默認(rèn)情況下它是0，pageSize 是數(shù)字我們每頁將包含的項(xiàng)目數(shù)，預(yù)設(shè)為20（您可以變更此值）。
3. 在我們的狀態(tài)const [data, setData] = useState(空);我們將其傳遞給通用類型T，因?yàn)楫?dāng)我們將它用於不同的資料請(qǐng)求時(shí)，我們將期望不同類型的數(shù)據(jù)。

分頁

為了使頁面可訪問，我們必須考慮以下幾點(diǎn)：

• 焦點(diǎn)必須穿過頁面的所有互動(dòng)元素，並有一個(gè)可見的指示器
• 為了確保與螢?zāi)婚喿x器的良好交互，我們必須正確使用區(qū)域、屬性和狀態(tài)
• 頁面必須分組在標(biāo)籤內(nèi)，並包含將其標(biāo)識(shí)為頁面本身的 aria-label。
• 分頁中的每個(gè)項(xiàng)目都必須包含 aria-setsize 和 aria-pointset。現(xiàn)在，它們是做什麼用的？ aria-setsize 用於計(jì)算分頁清單中的項(xiàng)目總數(shù)。螢?zāi)婚喿x器將如下宣布：

aria-pointset 用於計(jì)算該項(xiàng)目在頁面上所有項(xiàng)目中的位置。螢?zāi)婚喿x器將如下宣布：

• 每個(gè)項(xiàng)目都必須有一個(gè) aria-label，以便能夠識(shí)別單擊該按鈕時(shí)我們將轉(zhuǎn)到哪個(gè)頁面。
• 有按鈕可以轉(zhuǎn)到下一個(gè)/上一個(gè)元素，而且每個(gè)按鈕都必須有其對(duì)應(yīng)的 aria-label
• 如果我們的分頁包含省略號(hào)，則必須使用 aria-label 正確標(biāo)記它
• 每次我們進(jìn)入新頁面時(shí)，螢?zāi)婚喿x器都必須宣布我們所在的頁面以及有多少個(gè)新項(xiàng)目，如下所示。

為了實(shí)現(xiàn)這一點(diǎn)，我們將對(duì)其進(jìn)行如下編碼：

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

當(dāng)頁面停止載入時(shí)，我們將使用 currentPage 和我們正在載入的新陣列的長(zhǎng)度來設(shè)定一條新訊息。

現(xiàn)在是的！讓我們看看檔案 pagination.tsx

此組件需要五個(gè)道具

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
包含的要顯示的項(xiàng)目總數(shù)。
• nextPage 此函數(shù)將允許我們轉(zhuǎn)到下一頁並更新 currentPage 狀態(tài)，如下所示：

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

• prevPage 此函數(shù)將允許我們轉(zhuǎn)到目前頁面的上一頁並更新 currentPage 狀態(tài)

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

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

• goToPage 這個(gè)函數(shù)需要一個(gè)數(shù)字參數(shù)，它是每個(gè)項(xiàng)目必須能夠轉(zhuǎn)到所需頁面的函數(shù)。讓我們按如下方式使其工作：

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

為了使我們的分頁變得生動(dòng)，我們還需要一步，創(chuàng)建我們將在列表中迭代的數(shù)組！為此，我們必須遵循以下步驟：

1. 建立一個(gè)函數(shù)，在本例中我將其命名為 getPageNumbers
2. 為清單中的第一個(gè)和最後一個(gè)項(xiàng)目建立變數(shù)。
3. 為左邊的省略號(hào)建立一個(gè)變數(shù)。根據(jù)我自己的決定，我的省略號(hào)將位於清單的第四個(gè)元素之後。
4. 為右邊的省略號(hào)建立一個(gè)變數(shù)。根據(jù)我自己的決定，我的省略號(hào)將放在清單中的三個(gè)項(xiàng)目之前。
5. 建立一個(gè)函數(shù)，傳回一個(gè)數(shù)組，其中 5 個(gè)項(xiàng)目始終居中，即當(dāng)前頁面、前兩個(gè)項(xiàng)目和後兩個(gè)項(xiàng)目。如果需要，我們將排除第一頁和最後一頁 const pagesAroundCurrent = [currentPage - 2, currentPage - 1, currentPage, currentPage 1, currentPage 2].filter(page => page >firstPage && page
6. 對(duì)於最後一個(gè)變量，我們將建立一個(gè)包含所有先前建立的變數(shù)的數(shù)組。
7. 最後，我們將過濾掉空元素並傳回陣列。

我們將透過該數(shù)組來獲取頁面中的項(xiàng)目列表，如下所示：

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

以下是如何製作可重複使用且易於存取的分頁！就我個(gè)人而言，我學(xué)習(xí)瞭如何從頭開始創(chuàng)建頁面，因?yàn)槲冶仨氃诩磿r(shí)編碼中實(shí)現(xiàn)它，我希望我的經(jīng)驗(yàn)對(duì)您的職業(yè)生涯有所幫助，並且您可以實(shí)現(xiàn)甚至改進(jìn)它！

您好，
雲(yún)母

以上是可存取的元件：分頁的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！