在React中分页

Question

[可能是一个愚蠢的问题，但我似乎无法自行解决。假设我在页面上显示了一长串物品。我只想将其分页到例如每页5个项目。为了避免重新发明轮子，查找了几个库，react-js-pagination似乎可以满足我的需求。但是对于我的一生，我无法弄清楚。我按照下面的简化示例尝试过的操作：

• 将<Pagination />和我的列表放在同一格中。>>
• 根据API文档为我的列表项提供page-item类。

没有运气。我添加了<ul>的父项和/或将我的商品放入<li>标记中。甚至给父母<ul>一类的“分页”。没有。我能够实现的唯一区别是，所有项目都显示在同一行中，就像您在屏幕快照中看到的一样。您发现我想念的任何事物都会受到赞赏。

import 'react-toastify/dist/ReactToastify.css';
import Pagination from "react-js-pagination";
import 'bootstrap/dist/css/bootstrap.css';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activePage: 1
        }
    }

    handlePageChange(pageNumber) {
        this.setState({activePage: pageNumber});
    }

    render() {
        return (
            <div>
                <ul className="pagination">
                    <li className="page-item">1</li>
                    <li className="page-item">2</li>
                    <li className="page-item">3</li>
                    <li className="page-item">4</li>
                    <li className="page-item">5</li>
                    <li className="page-item">6</li>
                    <li className="page-item">7</li>
                    <li className="page-item">8</li>
                    <li className="page-item">9</li>
                    <li className="page-item">10</li>
                    <li className="page-item">11</li>
                </ul>
                <Pagination
                    activePage={this.state.activePage}
                    itemsCountPerPage={2}
                    totalItemsCount={11}
                    pageRangeDisplayed={5}
                    onChange={this.handlePageChange.bind(this)}
                    itemClass="page-item"
                    linkClass="page-link"
                />
            </div>
        );
    }
}

export default App;
到目前为止的结果：

[可能是一个愚蠢的问题，但我似乎无法自行解决。假设我在页面上显示了一长串物品。我只想将其分页到例如每页5个项目。到...

Answer 1

分页器和显示的内容是两个不同的事物，并且分别进行管理。分页没问题，但是在每个onChange事件上，您都需要从数据数组或API或其他任何东西中获取x个元素，其中x是您的pageSize（我想这里是itemsCountPerPage）。检索到的元素是x元素，从索引x * pageIndex开始，pageIndex是当前页面（1、2 3等）。