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

【问题标题】：Converting pagination from `react-js-pagination` to` react-bootstrap` pagination将分页从“react-js-pagination”转换为“react-bootstrap”分页
【发布时间】：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/？

【问题讨论】：

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

标签： javascript reactjs pagination react-bootstrap

【解决方案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

【讨论】：