Giới thiệu về Phân trang trong React Sử dụng Reac-paginate
Tổ chức và hiển thị lượng lớn dữ liệu theo cách thân thiện với người dùng sẽ cải thiện trải nghiệm người dùng. Một kỹ thuật được sử dụng để đạt được điều này là phân trang.
Trong React, thư viện react-paginate có thể giúp bạn đơn giản hóa việc triển khai.
Mục Lục
Giới thiệu về Thư viện phản ứng phân trang
Thư viện phân trang phản ứng giúp dễ dàng hiển thị phân trang trong React. Nó cho phép bạn liệt kê các mục trên các trang và cung cấp các tùy chọn có thể tùy chỉnh cho những thứ như kích thước trang, phạm vi trang và số lượng trang. Nó cũng có một trình xử lý sự kiện tích hợp để bạn có thể viết mã để phản hồi các thay đổi của trang.
Dưới đây, bạn sẽ thấy cách bạn có thể sử dụng phân trang phản ứng để phân trang dữ liệu được truy xuất từ API.
Thiết lập dự án
Để bắt đầu, hãy tạo một dự án React bằng lệnh tạo ứng dụng phản ứng hoặc Vite. Hướng dẫn này sử dụng Vite. Bạn có thể tìm thấy hướng dẫn trong bài đăng này về cách thiết lập dự án React với Vite.
Khi bạn đã tạo dự án, hãy xóa một số nội dung trong App.jsx, để nó khớp với mã này:
function App() {
return (
<div> </div>
);
}export default App;
Điều này cung cấp cho bạn một tệp sạch để bắt đầu làm việc với phân trang phản ứng.
Thiết lập dữ liệu
Bạn sẽ tìm nạp dữ liệu từ API trình giữ chỗ JSON. API này cung cấp các điểm cuối cho bài đăng, nhận xét, album, ảnh, việc cần làm và người dùng. Thông qua điểm cuối bài đăng, bạn sẽ tìm nạp dữ liệu từ API bằng cách sử dụng Axios, một thư viện máy khách HTTP.
Để bắt đầu, hãy cài đặt Axios bằng lệnh đầu cuối này:
npm install axios
Tiếp theo, nhập thư viện useEffect hook và axios ở đầu Ứng dụng.jsxsau đó tìm nạp các bài đăng từ API như hình bên dưới.
import axios from "axios";
import { useEffect, useState } from "react";function App() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
setData(response.data);
});
}, []);
return (
<div> </div>
);
}
export default App;
Móc useState khởi tạo một biến trạng thái được gọi là dữ liệu với một mảng trống. Bạn sẽ sử dụng hàm setData để cập nhật trạng thái khi API trả về các bài đăng.
Bây giờ bạn đã thiết lập dự án và lấy dữ liệu, đã đến lúc thêm phân trang bằng cách sử dụng phân trang phản ứng. Dưới đây là các bước bạn nên làm theo:
1. Cài đặt phản ứng phân trang
Chạy lệnh sau để cài đặt phản ứng phân trang bằng npm.
npm install react-paginate
2. Đặt Trạng thái Ban đầu của Trang
Sử dụng hook useState để theo dõi trang hiện tại và tổng số trang.
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
Bạn cũng nên chỉ định tổng số mục mà một trang có thể có.
const itemsPerPage = 10
Trong hook useEffect, hãy thêm dòng sau để tính tổng số trang dựa trên độ dài dữ liệu và số lượng mục trên mỗi trang. Sau đó lưu trữ nó trong biến trạng thái totalPages.
setTotalPages(Math.ceil(response.data.length / itemsPerPage));
Móc useEffect của bạn bây giờ trông như thế này:
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
setData(response.data);
setTotalPages(Math.ceil(response.data.length / itemsPerPage))
});
}, []);
3. Xác định một hàm để xử lý các thay đổi của trang
Trước tiên, hãy xác định các biến start Index, end Index và subset để hiển thị tập hợp con dữ liệu dựa trên số trang hiện tại.
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice(startIndex, endIndex);
Mã này tính toán các giá trị start Index và end Index dựa trên giá trị trạng thái Trang hiện tại và giá trị itemPerPage. Sau đó, nó sử dụng các biến này để cắt mảng dữ liệu thành một tập hợp con các mục.
Sau đó thêm chức năng handlePageChange. Đây là trình xử lý sự kiện sẽ chạy khi người dùng nhấp vào nút Tiếp theo.
const handlePageChange = (selectedPage) => {
setCurrentPage(selectedPage.selected);
};
Nhìn chung, ứng dụng của bạn sẽ trông như thế này:
import axios from "axios";
import { useEffect, useState } from "react";function App() {
const [data, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const itemsPerPage = 10;
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts/').then((response) => {
setData(response.data);
});
setTotalPages(Math.ceil(response.data.length / itemsPerPage));
}, []);
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice(startIndex, endIndex);
const handlePageChange = (selectedPage) => {
setCurrentPage(selectedPage.selected);
};
return (
<div> </div>
);
}
export default App;
Bước cuối cùng là hiển thị các trang bằng thành phần ReactPaginate. Thêm phần sau vào câu lệnh return, thay thế phần trống div.
<div>
{subset.map((item) => (
<div key={item.id}>{item.title}</div>
))}
<ReactPaginate
pageCount={totalPages}
onPageChange={handlePageChange}
forcePage={currentPage}
/>
</div>
Điều này lặp lại các mục trong tập hợp con hiện tại và hiển thị chúng, đồng thời chuyển các đạo cụ pageCount, onPageChange và forceChange sang ReactPaginate.
Tùy chỉnh phản ứng phân trang
Reac-paginate cung cấp một số đạo cụ cho phép bạn tùy chỉnh giao diện của thành phần phân trang để phù hợp với nhu cầu của ứng dụng của bạn.
Dưới đây là một số ví dụ.
- Tùy chỉnh các nút tiếp theo và trước đó bằng cách sử dụng các đạo cụ trướcLabel và nextLabel. Ví dụ: bạn có thể sử dụng nhãn chữ V như hình bên dưới.
<ReactPaginate
previousLabel={"<<"}
nextLabel={">>"}
/> - Tùy chỉnh nhãn ngắt bằng chỗ dựa breakLabel. Nhãn ngắt là nhãn được hiển thị khi số lượng trang nhiều và thành phần phân trang không thể hiển thị tất cả các liên kết trang. Thay vào đó, nó hiển thị dấu ngắt, được biểu thị bằng nhãn dấu ngắt, giữa các liên kết. Đây là một ví dụ sử dụng dấu chấm lửng.
<ReactPaginate
breakLabel={"..."}
/> - Tùy chỉnh số trang hiển thị. Nếu bạn không muốn hiển thị tất cả các trang, bạn có thể chỉ định số lượng trang bằng cách sử dụng pageCount prop. Mã bên dưới chỉ định số trang là 5.
<ReactPaginate
pageCount={5}
/> - Tùy chỉnh các lớp Container và Active. Bạn có thể tùy chỉnh tên lớp cho bộ chứa phân trang và liên kết trang đang hoạt động bằng cách sử dụng các đạo cụ containerClassName và activeClassName tương ứng. Sau đó, bạn có thể tạo kiểu cho thành phần phân trang bằng cách sử dụng các lớp này cho đến khi nó phù hợp với giao diện ứng dụng của bạn.
<ReactPaginate
containerClassName={"pagination-container"}
activeClassName={"active-page"}
/>
Đây không phải là danh sách đầy đủ các tùy chọn tùy chỉnh có sẵn. Bạn có thể tìm thấy phần còn lại trong tài liệu thư viện phân trang phản ứng.
Phân trang là một tính năng quan trọng trong bất kỳ ứng dụng nào hiển thị lượng lớn dữ liệu. Nếu không phân trang, người dùng phải cuộn qua các danh sách dài để tìm thông tin họ cần, điều này rất tốn thời gian.
Phân trang cho phép người dùng dễ dàng điều hướng đến dữ liệu cụ thể mà họ đang tìm kiếm bằng cách chia dữ liệu đó thành các phần nhỏ hơn, dễ quản lý hơn. Điều này không chỉ tiết kiệm thời gian mà còn giúp người dùng xử lý thông tin dễ dàng hơn.