javascript - 将分页从 `react-js-pagination` 转换为`react-bootstrap`分页

Question

我有一个现成的分页组件: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/ ？

Answer 1

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}
/>

检查这个代码沙盒:https://codesandbox.io/s/polished-darkness-pm7v8?fontsize=14