每行5列数据的分页实现问题（React/JavaScript）

需求：UI中每页展示5个数据区块，点击「下一页」按钮时隐藏当前组，显示下一组5个数据，支持循环切换分页。

完整实现代码 #

CSS 样式

.parent {
    display: flex;
    flex-wrap: wrap; /* 让区块自动换行，适配33%宽度 */
    gap: 1%; /* 增加间距，避免挤在一起 */
}

.child {
    margin-top: 2%;
    width: 33%;
}

.page-btn {
    margin-top: 20px;
    padding: 8px 16px;
    cursor: pointer;
}

React 组件代码

import { useState } from 'react';

const DataPagination = () => {
    // 替换为你的实际数据
    const list = {
        data: [
            { name: '区块1' }, { name: '区块2' }, { name: '区块3' },
            { name: '区块4' }, { name: '区块5' }, { name: '区块6' },
            { name: '区块7' }, { name: '区块8' }, { name: '区块9' },
            { name: '区块10' }, { name: '区块11' }, { name: '区块12' }
        ]
    };
    const pageSize = 5; // 每页展示数量
    const [currentPage, setCurrentPage] = useState(1);
    const totalPages = Math.ceil(list.data.length / pageSize);

    // 获取当前页要展示的数据
    const currentData = list.data.slice(
        (currentPage - 1) * pageSize,
        currentPage * pageSize
    );

    // 处理下一页点击，实现循环切换
    const handleNextPage = () => {
        setCurrentPage(prev => prev === totalPages ? 1 : prev + 1);
    };

    return (
        <div>
            <div className="parent">
                {currentData.map((item, index) => (
                    <div key={index} className="child">
                        {item.name}
                    </div>
                ))}
            </div>
            <button className="page-btn" onClick={handleNextPage}>下一页</button>
        </div>
    );
};

export default DataPagination;

关键逻辑说明 #

• 状态管理：用currentPage记录当前页码，初始值设为1
• 数据切片：通过slice方法从完整数据中截取当前页的5条数据
• 循环分页：点击按钮时判断是否为最后一页，若是则回到第1页，否则页码加1
• 样式适配：给.parent添加flex-wrap: wrap，让区块自动换行避免横向溢出

内容的提问来源于stack exchange，提问作者John Ken