[英]Converting pagination from `react-js-pagination` to` react-bootstrap` pagination
I have a ready pagination component: https://www.npmjs.com/package/react-js-pagination 我有一个现成的分页组件: 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>
);
}
}
How to transform pagination from react-js-pagination
to react-bootstrap
pagination https://react-bootstrap.github.io/components/pagination/ ? 如何将分页从
react-js-pagination
为react-bootstrap
分页https://react-bootstrap.github.io/components/pagination/ ?
react-bootstrap
pagination is just a UI component that renders the pagination items and can't handle the stuff react-js-pagination
is handling. react-bootstrap
分页只是一个UI组件,它呈现分页项并且无法处理react-js-pagination
正在处理的内容。 It is mentioned in react-js-pagination
docs that you can import your own CSS style and use the classes for the pagination items. 在
react-js-pagination
文档中提到,您可以导入自己的CSS样式并将类用于分页项。 So just importing bootstrap
style is enough and then you can do this: 因此,仅导入
bootstrap
样式就足够了,然后您可以执行以下操作:
import "bootstrap/dist/css/bootstrap.min.css";
<ReactPagination
itemClass="page-item"
linkClass="page-link"
hideNavigation
activePage={2}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={5}
/>
Check this Codesandbox: https://codesandbox.io/s/polished-darkness-pm7v8?fontsize=14 检查此Codesandbox: https ://codesandbox.io/s/polished-darkness-pm7v8 ? fontsize = 14
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.