可存取的元件：分頁

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

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個參數。一個用於url，我們將在其中獲取數據，currentPage 是我們所在的頁面，默認情況下它是0，pageSize 是數字我們每頁將包含的項目數，預設為20（您可以變更此值）。
3. 在我們的狀態const [data, setData] = useState(空);我們將其傳遞給通用類型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

中的程式碼結構如何

此組件需要五個道具

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

我們將透過該數組來獲取頁面中的項目列表，如下所示：

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中文網其他相關文章！