本文介绍了尝试自己动手用 react 来写一个分页组件 (小结), 分享给大家, 具体如下:
分页效果
在线预览
github 地址
效果截图 (样式可自行修改):
构建项目
create - react - app react - paging - component
分页组件
1. 子组件
创建 Pagecomponent.js 文件
核心代码:
初始化值
- constructor(props) {
- super(props)
- this.state = {
- currentPage: 1, // 当前页码
- groupCount: 5, // 页码分组, 显示 7 个页码, 其余用省略号显示
- startPage: 1, // 分组开始页码
- totalPage:1 // 总页数
- }
- }
动态生成页码函数
- createPage() {
- const {currentPage, groupCount, startPage,totalPage} = this.state;
- let pages = []
- // 上一页
- pages.push(<li className={currentPage === 1 ? "nomore" : null} onClick={this.prePageHandeler.bind(this)}
- key={0}>
上一页 </li>)
- if (totalPage <= 10) {
- /* 总页码小于等于 10 时, 全部显示出来 */
- for (let i = 1; i <= totalPage; i++) {
- pages.push(<li key={i} onClick={this.pageClick.bind(this, i)}
- className={currentPage === i ? "activePage" : null}>{i}</li>)
- }
- } else {
- /* 总页码大于 10 时, 部分显示 */
- // 第一页
- pages.push(<li className={currentPage === 1 ? "activePage" : null} key={1}
- onClick={this.pageClick.bind(this, 1)}>1</li>)
- let pageLength = 0;
- if (groupCount + startPage > totalPage) {
- pageLength = totalPage
- } else {
- pageLength = groupCount + startPage;
- }
- // 前面省略号 (当当前页码比分组的页码大时显示省略号)
- if (currentPage >= groupCount) {
- pages.push(<li className="" key={-1}>...</li>)
- }
- // 非第一页和最后一页显示
- for (let i = startPage; i < pageLength; i++) {
- if (i <= totalPage - 1 && i > 1) {
- pages.push(<li className={currentPage === i ? "activePage" : null} key={i}
- onClick={this.pageClick.bind(this, i)}>{i}</li>)
- }
- }
- // 后面省略号
- if (totalPage - startPage >= groupCount + 1) {
- pages.push(<li className="" key={-2}>...</li>)
- }
- // 最后一页
- pages.push(<li className={currentPage === totalPage ? "activePage" : null} key={totalPage}
- onClick={this.pageClick.bind(this, totalPage)}>{totalPage}</li>)
- }
- // 下一页
- pages.push(<li className={currentPage === totalPage ? "nomore" : null}
- onClick={this.nextPageHandeler.bind(this)}
- key={totalPage + 1}> 下一页 </li>)
- return pages;
- }
页码点击函数:
- // 页码点击
- pageClick(currentPage) {
- const {
- groupCount
- } = this.state const getCurrentPage = this.props.pageCallbackFn;
- // 当 当前页码 大于 分组的页码 时, 使 当前页 前面 显示 两个页码
- if (currentPage >= groupCount) {
- this.setState({
- startPage: currentPage - 2,
- })
- }
- if (currentPage < groupCount) {
- this.setState({
- startPage: 1,
- })
- }
- // 第一页时重新设置分组的起始页
- if (currentPage === 1) {
- this.setState({
- startPage: 1,
- })
- }
- this.setState({
- currentPage
- })
- // 将当前页码返回父组件
- getCurrentPage(currentPage)
- }
上一页和夏夜点击事件
- // 上一页事件
- prePageHandeler() {
- let {currentPage} = this.state
- if (--currentPage === 0) {
- return false
- }
- this.pageClick(currentPage)
- }
- // 下一页事件
- nextPageHandeler() {
- let {currentPage,totalPage} = this.state
- // const {totalPage} = this.props.pageConfig;
- if (++currentPage > totalPage) {
- return false
- }
- this.pageClick(currentPage)
- }
组件渲染到 DOM 上
- render() {
- const pageList = this.createPage();
- return (
- <ul className="page-container">
- {pageList}
- </ul>
- )
- }
2. 父组件
创建 Pagecontainer.js 文件
父组件完整代码
- import React, {Component} from 'react'
- import Pagecomponent from '../components/Pagecomponent'
- import data from '../mock/tsconfig.json'
- class Pagecontainer extends Component {
- constructor() {
- super()
- this.state = {
- dataList:[],
- pageConfig: {
- totalPage: data.length // 总页码
- }
- }
- this.getCurrentPage = this.getCurrentPage.bind(this)
- }
- getCurrentPage(currentPage) {
- this.setState({
- dataList:data[currentPage-1].name
- })
- }
- render() {
- return (
- <div>
- <div>
- {this.state.dataList}
- </div>
- <Pagecomponent pageConfig={this.state.pageConfig}
- pageCallbackFn={this.getCurrentPage}/>
- </div>
- )
- }
- }
- export default Pagecontainer
来源: http://www.jb51.net/article/134783.htm