将分页从“react-js-pagination”转换为“react-bootstrap”分页

Posted 2023-03-10

【中文标题】将分页从“react-js-pagination”转换为“react-bootstrap”分页

【英文标题】：Converting pagination from `react-js-pagination` to` react-bootstrap` pagination

【发布时间】：2020-01-12 06:33:32

【问题描述】：

我有一个现成的分页组件：https://www.npmjs.com/package/react-js-pagination

import React,  Component  from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
require("bootstrap/less/bootstrap.less");

class App extends Component 
  constructor(props) 
    super(props);
    this.state = 
      activePage: 1,
      todos: []
    ;
  

  handlePageChange(pageNumber) 
    console.log(`active page is $pageNumber`);
    this.setState(activePage: pageNumber);
  

  render() 
    return (
      <div>
        <Pagination
          activePage=this.state.activePage
          totalItemsCount=this.state.todos.length
          pageRangeDisplayed=2
          onChange=this.handlePageChange
        />
      </div>
    );
  

如何将分页从react-js-pagination 转换为react-bootstrap 分页https://react-bootstrap.github.io/components/pagination/？

【问题讨论】：

您在提供的链接中拥有自己进行此转换所需的所有信息。如果您被困在与之相关的特定问题上，则需要更加清楚。到目前为止，您到底尝试了什么？您看到了什么错误或行为？ *** 不存在简单地为您编写代码。先尝试自己做。

【参考方案1】：

我使用 react-bhx-pagination 是因为你可以获得 json，当你到达页面末尾时自动加载，并且非常易于使用和更改。

示例：Online demo

组件： react-bhx-pagination

【参考方案2】：

react-bootstrap 分页只是一个呈现分页项的 UI 组件，无法处理 react-js-pagination 正在处理的内容。 react-js-pagination 文档中提到您可以导入自己的 CSS 样式并使用分页项的类。所以只需导入bootstrap 样式就足够了，然后你可以这样做：

import "bootstrap/dist/css/bootstrap.min.css";

<ReactPagination
    itemClass="page-item"
    linkClass="page-link"
    hideNavigation
    activePage=2
    itemsCountPerPage=10
    totalItemsCount=450
    pageRangeDisplayed=5
/>

检查此 Codesandbox：https://codesandbox.io/s/polished-darkness-pm7v8?fontsize=14