react分页组件实现：DiReactPagination

最新推荐文章于 2024-05-08 09:34:06 发布
最新推荐文章于 2024-05-08 09:34:06 发布
阅读量342 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：https://my.oschina.net/tbd/blog/1551890
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

完整版下载地址：https://gitee.com/dgx/DiReactPagination

完整版演示地址：http://dgx.gitee.io/direactpagination/build/index.html#/

 

一.准备工作

我们是继续基于这个demo项目实现一个分页插件，这个分页插件会用在各个需要的组建当中。

分页插件的名字我们就叫做：DiReactPage

分页插件会用在任何一个可能的位置，我们在tpl目录创建这个组件：DiReactPage

093821_qaZC_2352644.png

DiReactPage.js:

093837_pKtt_2352644.png

我们知道这个组件是通用的，他回以子组件的方式应用到需要的位置，一般一个分页插件包含：

1.第一页按钮

2.上一页按钮（在第一页无效）

3.页数按钮（显现当前位置以及之后的5个，如果总页数小于5特殊处理）

4.下一页按钮（在第最后一页无效）

5.最后一页按钮

6.总页数

7.跳页操作（一个输入框，后面一个点击按钮）

我们先考虑逻辑处理，先完成结构和样式，实现一个可视化的静态分页。

二.静态实现

DiReactPage.js使用jsx书写结构，我们的分页样式为了简单化都会提到一个共用位置，在index.html去引入DiReactPage.css。

DiReactPage.js:

import React, { Component } from 'react';

//=====分页组件=====

class DiReactPage extends Component {
	
	render() {
		
		return (
			<div className="DiReactPage">
				<div className="DiReactPage-btn">第一页</div>
				<div className="DiReactPage-btn disable">上一页</div>
				<div className="DiReactPage-page">
					<span className="active">1</span>
					<span>2</span>
					<span>3</span>
					<span>4</span>
				</div>
				<div className="DiReactPage-btn">下一页</div>
				<div className="DiReactPage-btn">最后一页</div>
				<div className="DiReactPage-btn">总4页</div>
				<input className="DiReactPage-btn" type="text" />
				<button className="DiReactPage-btn">跳转</button>
			</div>
		);
	}

		
	componentDidMount() {
	  	console.log("我是分页组件")
	}
	
}


export default DiReactPage

会有两个特殊的类名，一个是disable用来标记按钮是否可用，active标签当前所在的页数。

index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
    <link rel="stylesheet" href="css/DiReactPage.css" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

DiReactPage.css：

.DiReactPage{ height:30px; line-height:30px; text-align:center;}
.DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
.DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
.DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
.DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
.DiReactPage .DiReactPage-page span.active{ color:#09F; }
.DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
.DiReactPage .DiReactPage-skip{display:inline-block; height:30px; line-height:30px; width:80px; border-radius:4px; background:#09F;cursor:pointer; border:none; margin:0 10px;}

我们在新闻页面使用这个分页组件，预览效果。

News.js：

import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';

import DiReactPage from '../../tpl/DiReactPage.js';
//=====组件=====

class News extends Component {
	
	constructor(props) {
		super(props);
	}
	
	render() {
		if(this.props.isLogin==false){
			return <Redirect to="/" />
		}
		
		return (
			<div>
				<h3>新闻页面</h3>
				<ul>
					{
						this.props.list.map(function(item,i){
							return <li key={item.id}>
								<a>{item.title}</a>
								<span>{item.con}</span>
							</li>
						})	
					}
				</ul>
				<DiReactPage />
				<button onClick={this.SORTREVERSE.bind(this)}>倒叙显示</button>
			</div>
		);
	}
	
	SORTREVERSE(){
		this.props.SORTREVERSE();
	}
	
	componentDidMount() {
	  	console.log("News渲染完毕")
	}
	
}


export default News

显示效果如下：

100953_Dj3L_2352644.png

三.逻辑分析和准备工作

1.我们知道组件之间可以传递数据，利用属性，

2.我们的分页json是存放在redux中

3.我们会有一个action，会根据当前点击的页数返回对应的json数据

4.分页的显示状态可以完全来自父组件，也就是总页数，当前第几页等都是父组件作为属性扔给分页组件

5.发射action（获取对应页数的数据）方法也要放在父组件当中，因为分页组件写死就变成只能修改一个redux文件，所以这个方法也要传递给分页组件

6.总结得出分页组件只是承受的一端，一切操作和显示都要来自父组件

我们先给news相关的处理加入分页功能，包含一个返回对应页数的acion，一个数据返回相关信息的模拟，

包含总页数，当前的页数，是否有下一页状态的ajax信息等！

我们会为分页的处理单独创建一个路由页面：

103250_eQre_2352644.png

操作基本同news相似，我就直接显示修改好的代码：

103432_cIgP_2352644.png

PageShow.js：

import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';

import DiReactPage from '../../tpl/DiReactPage.js';
//=====组件=====

class PageShow extends Component {
	
	constructor(props) {
		super(props);
	}
	
	render() {
		if(this.props.isLogin==false){
			return <Redirect to="/" />
		}
		
		return (
			<div>
				<h3>分页展示</h3>
				<ul>
					{
						this.props.list.map(function(item,i){
							return <li key={item.id}>
								<span>{item.text}</span>
							</li>
						})	
					}
				</ul>
				<DiReactPage />
			</div>
		);
	}
	
	
	componentDidMount() {
	  	console.log("PageShow渲染完毕");
		this.props.GETLIST(2);
	}
	
}


export default PageShow

PageShowReactRedux.js：

import { connect } from 'react-redux';

//=====引入组件=====
import PageShow from './PageShow.js'


//=====react-redux 封装组件=====

// 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的？
function mapStateToProps(state) {
	return {
		isLogin:state.isLogin,
		list: state.PageShowRedux.list,
		allpage: state.PageShowRedux.allpage,
		currentpage: state.PageShowRedux.currentpage,
		nextpage: state.PageShowRedux.nextpage
	};
}

// 哪些 action 创建函数是我们想要通过 props 获取的？
function mapDispatchToProps(dispatch) {
	return {
		GETLIST:function(currentpage){
			var list=[];
			var allpage="";
			var nextpage="";
			setTimeout(function(){
				//模拟ajax数据
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"},
						{id:4,text:"44444444444"},
						{id:5,text:"555555555"},
					]
					allpage=7
					nextpage=true;
				}else if(currentpage==2){
					list=[
						{id:1,text:"66666666"},
						{id:2,text:"7777777777"},
						{id:3,text:"8888888888"},
						{id:4,text:"99999999999"},
						{id:5,text:"101010"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==3){
					list=[
						{id:1,text:"111111111111111"},
						{id:2,text:"121212"},
						{id:3,text:"131313"},
						{id:4,text:"141414"},
						{id:5,text:"15515"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==4){
					list=[
						{id:1,text:"161616"},
						{id:2,text:"171717"},
						{id:3,text:"181818"},
						{id:4,text:"191919"},
						{id:5,text:"202020"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==5){
					list=[
						{id:1,text:"2121"},
						{id:2,text:"22222"},
						{id:3,text:"232323"},
						{id:4,text:"242424"},
						{id:5,text:"252525"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==6){
					list=[
						{id:1,text:"2626"},
						{id:2,text:"2727"},
						{id:3,text:"2828"},
						{id:4,text:"2929"},
						{id:5,text:"3030"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==7){
					list=[
						{id:1,text:"3131"},
						{id:2,text:"3232"}
					]
					allpage=7
					nextpage=false;				
				};
				dispatch({type:"GET_LIST",
						list:list,
						allpage:allpage,
						currentpage:currentpage,
						nextpage:nextpage})
			
			},1000);
			
		}
	};
}

//封装传递state和dispatch
var PageShowReactRedux = connect(mapStateToProps,mapDispatchToProps)(PageShow);

export default PageShowReactRedux

PageShowRedux.js：

//reducer

var pageinit={
	list:[],
	allpage:0,
	currentpage:1,
	nextpage:false
};

function PageShowRedux(state = pageinit, action) {
	switch (action.type) {
		case "GET_LIST":
			//返回当前对应页数的信息
			return Object.assign({},state,{
						list:action.list,
						allpage:action.allpage,
						currentpage:action.currentpage,
						nextpage:action.nextpage
					})
		default:
		  	return state
	}
}


export default PageShowRedux

路由添加相关

rootRedux.js：

import { combineReducers } from 'redux';

//全局reducer
import isLogin from './indexRedux.js'
//子reducer
import NewsRedux from './page/news/NewsRedux.js'
import PageShowRedux from './page/pageshow/PageShowRedux.js'

//合并reducer
var rootRedux = combineReducers({
	isLogin,
	NewsRedux,
	PageShowRedux
})

export default rootRedux

App.js：

import React, { Component } from 'react';
import {
  Route,
  Link,
  Switch
} from 'react-router-dom';
import NavReactRedux from './NavReactRedux.js';
import LoginReactRedux from './page/login/LoginReactRedux.js';
import HomeReactRedux from './page/home/HomeReactRedux.js';
import AboutReactRedux from './page/about/AboutReactRedux.js';
import NewsReactRedux from './page/news/NewsReactRedux.js';
import PageShowReactRedux from './page/pageshow/PageShowReactRedux.js';
import NotFind from './page/notFind/NotFind.js';

class App extends Component {
  render() {
    return (
      <div className="App">
        	<NavReactRedux />
			<div>
				<Switch>
					<Route exact path="/" component={LoginReactRedux}/>
					<Route exact path="/Home" component={HomeReactRedux}/>
					<Route path="/About" component={AboutReactRedux}/>
					<Route exact path="/News" component={NewsReactRedux}/>
					<Route exact path="/PageShow" component={PageShowReactRedux}/>				
					<Route component={NotFind}/>			
				</Switch> 
			</div>
      </div>
    );
  }
}

export default App;

Nav.js：

import React, { Component } from 'react';
import {
  Route,
  Link
} from 'react-router-dom';


class Nav extends Component {
  render() {
    return (
		<ul style={{display:this.props.isLogin?"block":"none"}}>
			<li style={{display:this.props.isLogin?"none":"block"}}>
				<Link to="/">登录</Link>
			</li>
			<li>
				<Link to="/Home">主页</Link>
			</li>
			<li>
				<Link to="/About">关于我们</Link>
			</li>
			<li>
				<Link to="/News">新闻页面</Link>
			</li>
			<li>
				<Link to="/PageShow">分页演示</Link>
			</li>
		</ul>
    );
  }
}

export default Nav;

显示测试效果：

110013_KCK0_2352644.png

我们参数传递了2所以模拟返回了第二页数据！

四.显示效果逻辑书写

默认传递是第一页：

110215_vYig_2352644.png

我们要传递个分页组件的参数属性有：

总页数

当前页数

是否有下一页

PageShow.js：

import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';

import DiReactPage from '../../tpl/DiReactPage.js';
//=====组件=====

class PageShow extends Component {
	
	constructor(props) {
		super(props);
	}
	
	render() {
		if(this.props.isLogin==false){
			return <Redirect to="/" />
		}
		
		return (
			<div>
				<h3>分页展示</h3>
				<ul>
					{
						this.props.list.map(function(item,i){
							return <li key={item.id}>
								<span>{item.text}</span>
							</li>
						})	
					}
				</ul>
				<DiReactPage allpage={this.props.allpage} currentpage={this.props.currentpage} nextpage={this.props.nextpage} />
			</div>
		);
	}
	
	
	componentDidMount() {
	  	console.log("PageShow渲染完毕");
		this.props.GETLIST(5);
	}
	
}


export default PageShow

在分页组件我们利用这些值来控制状态的显示

DiReactPage.js：

import React, { Component } from 'react';

//=====分页组件=====

class DiReactPage extends Component {
	constructor(props) {
		super(props);
		
	}
	
	render() {
		//显示控制
		var currentpage=this.props.currentpage;
		var pages=[];
		if(this.props.allpage>=5){
			if(currentpage+5>this.props.allpage){
				for(var i=currentpage;i<=this.props.allpage;i++){
					pages.push(i);
				};
			}else{
				for(var i=currentpage;i<currentpage+5;i++){
					pages.push(i);
				};
			};
		}else{
			for(var i=currentpage;i<=this.props.allpage;i++){
				pages.push(i);
			};
		};
		return (
			<div className="DiReactPage">
				<div className="DiReactPage-btn">第一页</div>
				<div className={this.props.currentpage==1?"DiReactPage-btn disable":"DiReactPage-btn"}>上一页</div>
				<div className="DiReactPage-page">
					{
						pages.map(function(item,i){
							return <span key={i} className={currentpage==item?"active":""}>{item}</span>
						})
					}
				</div>
				<div className={this.props.currentpage==this.props.allpage?"DiReactPage-btn disable":"DiReactPage-btn"}>下一页</div>
				<div className="DiReactPage-btn">最后一页</div>
				<div className="DiReactPage-btn">总{this.props.allpage}页</div>
				<input className="DiReactPage-input" type="text" />
				<button className="DiReactPage-skip">跳转</button>
			</div>
		);
	}

		
	componentDidMount() {
	  	console.log("我是分页组件");
	}
	
}


export default DiReactPage

显示效果：

115003_qvI0_2352644.png

五.操作效果逻辑书写

就是各种点击事件的处理，在分页中，我们可以加入click事件即可。

DiReactPage.js：

import React, { Component } from 'react';

//=====分页组件=====

class DiReactPage extends Component {
	constructor(props) {
		super(props);
		
	}
	
	render() {
		//显示控制
		var currentpage=this.props.currentpage;
		var pages=[];
		if(this.props.allpage>=5){
			if(currentpage+5>this.props.allpage){
				for(var i=currentpage;i<=this.props.allpage;i++){
					pages.push(i);
				};
			}else{
				for(var i=currentpage;i<currentpage+5;i++){
					pages.push(i);
				};
			};
		}else{
			for(var i=currentpage;i<=this.props.allpage;i++){
				pages.push(i);
			};
		};
		return (
			<div className="DiReactPage">
				<div className="DiReactPage-btn" onClick={this.diFirst.bind(this)}>第一页</div>
				<div className={this.props.currentpage==1?"DiReactPage-btn disable":"DiReactPage-btn"} onClick={this.diPrev.bind(this)}>上一页</div>
				<div className="DiReactPage-page">
					{
						pages.map(function(item,i){
							return <span key={i} className={currentpage==item?"active":""} onClick={this.diCurrent.bind(this,item)}>{item}</span>
						}.bind(this))
					}
				</div>
				<div className={this.props.currentpage==this.props.allpage?"DiReactPage-btn disable":"DiReactPage-btn"} onClick={this.diNext.bind(this)}>下一页</div>
				<div className="DiReactPage-btn"  onClick={this.diLast.bind(this)}>最后一页</div>
				<div className="DiReactPage-btn">总{this.props.allpage}页</div>
				<input className="DiReactPage-input" type="text" ref="cPage" />
				<button className="DiReactPage-skip"  onClick={this.diSkip.bind(this)}>跳转</button>
			</div>
		);
	}

	diFirst(){
		alert(1)
	}
	diPrev(){
		alert(this.props.currentpage-1)
	}
	
	diCurrent(page){
		alert(page)
	}	
	
	diNext(){
		alert(this.props.currentpage+1)
	}
	
	diLast(){
		alert(this.props.allpage)
	}
	diSkip(){
		alert(this.refs.cPage.value)
	}
	componentDidMount() {
	  	console.log("我是分页组件");
	}
	
}


export default DiReactPage

我们分析一部分已经说明，我们属性已经获取到了，还差最后一个就是把父组件获取数据的方法作为属性也传递给分页组件调用即可，不过在上一页和下一页按钮我们要有一个逻辑显示限制，就是在第一页和最后一页是不可点击的状态。

跳页处理非常简单我们把inpput的value拿到传递即可！

DiReactPage.js：

import React, { Component } from 'react';

//=====分页组件=====

class DiReactPage extends Component {
	constructor(props) {
		super(props);
		
	}
	
	render() {
		//显示控制
		var currentpage=this.props.currentpage;
		var pages=[];
		if(this.props.allpage>=5){
			if(currentpage+5>this.props.allpage){
				for(var i=currentpage;i<=this.props.allpage;i++){
					pages.push(i);
				};
			}else{
				for(var i=currentpage;i<currentpage+5;i++){
					pages.push(i);
				};
			};
		}else{
			for(var i=currentpage;i<=this.props.allpage;i++){
				pages.push(i);
			};
		};	
		return (
			<div className="DiReactPage">
				<div className="DiReactPage-btn" onClick={this.diFirst.bind(this)}>第一页</div>
				<div className={this.props.currentpage==1?"DiReactPage-btn disable":"DiReactPage-btn"} onClick={this.diPrev.bind(this)}>上一页</div>
				<div className="DiReactPage-page">
					{
						pages.map(function(item,i){
							return <span key={i} className={currentpage==item?"active":""} onClick={this.diCurrent.bind(this,item)}>{item}</span>
						}.bind(this))
					}
				</div>
				<div className={this.props.currentpage==this.props.allpage?"DiReactPage-btn disable":"DiReactPage-btn"} onClick={this.diNext.bind(this)}>下一页</div>
				<div className="DiReactPage-btn"  onClick={this.diLast.bind(this)}>最后一页</div>
				<div className="DiReactPage-btn">总{this.props.allpage}页</div>
				<input className="DiReactPage-input" type="text" ref="cPage" />
				<button className="DiReactPage-skip"  onClick={this.diSkip.bind(this)}>跳转</button>
			</div>
		);
	}

	diFirst(){
		//alert(1)
		this.props.GETLIST(1);
	}
	diPrev(){
		//alert(this.props.currentpage-1)
		if(this.props.currentpage-1<1){
			return false;
		}
		this.props.GETLIST(this.props.currentpage-1);
	}
	
	diCurrent(page){
		//alert(page)
		this.props.GETLIST(page);
	}	
	
	diNext(){
		//alert(this.props.currentpage+1)
		if(this.props.currentpage+1>this.props.allpage){
			return false;
		}
		this.props.GETLIST(this.props.currentpage+1);
	}
	
	diLast(){
		//alert(this.props.allpage)
		this.props.GETLIST(this.props.allpage);
	}
	diSkip(){
		//alert(this.refs.cPage.value)
		this.props.GETLIST(this.refs.cPage.value);
	}
	componentDidMount() {
	  	console.log("我是分页组件");
	}
	
}


export default DiReactPage

到这一步我们大致的处理就基本完成了！

六.一些处理的简单优化

1.ajax模拟返回优化

首先我们模拟的时间是1秒返回结果，我们改成200毫秒，更接近实际的ajax：

PageShowReactRedux.js:

import { connect } from 'react-redux';

//=====引入组件=====
import PageShow from './PageShow.js'


//=====react-redux 封装组件=====

// 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的？
function mapStateToProps(state) {
	return {
		isLogin:state.isLogin,
		list: state.PageShowRedux.list,
		allpage: state.PageShowRedux.allpage,
		currentpage: state.PageShowRedux.currentpage,
		nextpage: state.PageShowRedux.nextpage
	};
}

// 哪些 action 创建函数是我们想要通过 props 获取的？
function mapDispatchToProps(dispatch) {
	return {
		GETLIST:function(currentpage){
			var list=[];
			var allpage="";
			var nextpage="";
			setTimeout(function(){
				//模拟ajax数据
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"},
						{id:4,text:"44444444444"},
						{id:5,text:"555555555"},
					]
					allpage=7
					nextpage=true;
				}else if(currentpage==2){
					list=[
						{id:1,text:"66666666"},
						{id:2,text:"7777777777"},
						{id:3,text:"8888888888"},
						{id:4,text:"99999999999"},
						{id:5,text:"101010"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==3){
					list=[
						{id:1,text:"111111111111111"},
						{id:2,text:"121212"},
						{id:3,text:"131313"},
						{id:4,text:"141414"},
						{id:5,text:"15515"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==4){
					list=[
						{id:1,text:"161616"},
						{id:2,text:"171717"},
						{id:3,text:"181818"},
						{id:4,text:"191919"},
						{id:5,text:"202020"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==5){
					list=[
						{id:1,text:"2121"},
						{id:2,text:"22222"},
						{id:3,text:"232323"},
						{id:4,text:"242424"},
						{id:5,text:"252525"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==6){
					list=[
						{id:1,text:"2626"},
						{id:2,text:"2727"},
						{id:3,text:"2828"},
						{id:4,text:"2929"},
						{id:5,text:"3030"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==7){
					list=[
						{id:1,text:"3131"},
						{id:2,text:"3232"}
					]
					allpage=7
					nextpage=false;				
				};
				dispatch({type:"GET_LIST",
						list:list,
						allpage:allpage,
						currentpage:currentpage,
						nextpage:nextpage})
			
			},200);
			
		}
	};
}

//封装传递state和dispatch
var PageShowReactRedux = connect(mapStateToProps,mapDispatchToProps)(PageShow);

export default PageShowReactRedux

2.有无数据提示优化

在没有数据的时候我们要提示没有数据：

142437_8asu_2352644.png

显示成这样：

142512_O0eB_2352644.png

我们给分页组件和结构加入一个style是否显示判断就可以了：

PageShow.js:

import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';

import DiReactPage from '../../tpl/DiReactPage.js';
//=====组件=====

class PageShow extends Component {
	
	constructor(props) {
		super(props);
	}
	
	render() {
		if(this.props.isLogin==false){
			return <Redirect to="/" />
		}
		
		return (
			<div>
				<h3>分页展示</h3>
				<ul style={{display:this.props.allpage<=0?"none":"block"}}>
					{
						this.props.list.map(function(item,i){
							return <li key={item.id}>
								<span>{item.text}</span>
							</li>
						})	
					}
				</ul>
				<div style={{display:this.props.allpage<=0?"block":"none"}}>没有数据了</div>
				<DiReactPage allpage={this.props.allpage} currentpage={this.props.currentpage} nextpage={this.props.nextpage}  GETLIST={this.props.GETLIST}/>
			</div>
		);
	}
	
	
	componentDidMount() {
	  	console.log("PageShow渲染完毕");
		this.props.GETLIST(1);
	}
	
}


export default PageShow

DiReactPage.js:

import React, { Component } from 'react';

//=====分页组件=====

class DiReactPage extends Component {
	constructor(props) {
		super(props);
		
	}
	
	render() {
		//显示控制
		var currentpage=this.props.currentpage;
		var pages=[];
		if(this.props.allpage>=5){
			if(currentpage+5>this.props.allpage){
				for(var i=currentpage;i<=this.props.allpage;i++){
					pages.push(i);
				};
			}else{
				for(var i=currentpage;i<currentpage+5;i++){
					pages.push(i);
				};
			};
		}else{
			for(var i=currentpage;i<=this.props.allpage;i++){
				pages.push(i);
			};
		};	
		return (
			<div className="DiReactPage"  style={{display:this.props.allpage<=0?"none":"block"}}>
				<div className="DiReactPage-btn" onClick={this.diFirst.bind(this)}>第一页</div>
				<div className={this.props.currentpage==1?"DiReactPage-btn disable":"DiReactPage-btn"} onClick={this.diPrev.bind(this)}>上一页</div>
				<div className="DiReactPage-page">
					{
						pages.map(function(item,i){
							return <span key={i} className={currentpage==item?"active":""} onClick={this.diCurrent.bind(this,item)}>{item}</span>
						}.bind(this))
					}
				</div>
				<div className={this.props.currentpage==this.props.allpage?"DiReactPage-btn disable":"DiReactPage-btn"} onClick={this.diNext.bind(this)}>下一页</div>
				<div className="DiReactPage-btn"  onClick={this.diLast.bind(this)}>最后一页</div>
				<div className="DiReactPage-btn">总{this.props.allpage}页</div>
				<input className="DiReactPage-input" type="text" ref="cPage" />
				<button className="DiReactPage-skip"  onClick={this.diSkip.bind(this)}>跳转</button>
			</div>
		);
	}

	diFirst(){
		//alert(1)
		this.props.GETLIST(1);
	}
	diPrev(){
		//alert(this.props.currentpage-1)
		if(this.props.currentpage-1<1){
			return false;
		}
		this.props.GETLIST(this.props.currentpage-1);
	}
	
	diCurrent(page){
		//alert(page)
		this.props.GETLIST(page);
	}	
	
	diNext(){
		//alert(this.props.currentpage+1)
		if(this.props.currentpage+1>this.props.allpage){
			return false;
		}
		this.props.GETLIST(this.props.currentpage+1);
	}
	
	diLast(){
		//alert(this.props.allpage)
		this.props.GETLIST(this.props.allpage);
	}
	diSkip(){
		//alert(this.refs.cPage.value)
		this.props.GETLIST(this.refs.cPage.value);
	}
	componentDidMount() {
	  	console.log("我是分页组件");
	}
	
}


export default DiReactPage

3.测试分页显示逻辑，总页数小于5

我们只需要修改PageShowReactRedux.js:

只有4页数据

import { connect } from 'react-redux';

//=====引入组件=====
import PageShow from './PageShow.js'


//=====react-redux 封装组件=====

// 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的？
function mapStateToProps(state) {
	return {
		isLogin:state.isLogin,
		list: state.PageShowRedux.list,
		allpage: state.PageShowRedux.allpage,
		currentpage: state.PageShowRedux.currentpage,
		nextpage: state.PageShowRedux.nextpage
	};
}

// 哪些 action 创建函数是我们想要通过 props 获取的？
function mapDispatchToProps(dispatch) {
	return {
		GETLIST:function(currentpage){
			var list=[];
			var allpage="";
			var nextpage="";
			setTimeout(function(){
				//模拟ajax数据
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"},
						{id:4,text:"44444444444"},
						{id:5,text:"555555555"},
					]
					allpage=4
					nextpage=true;
				}else if(currentpage==2){
					list=[
						{id:1,text:"66666666"},
						{id:2,text:"7777777777"},
						{id:3,text:"8888888888"},
						{id:4,text:"99999999999"},
						{id:5,text:"101010"},
					]
					allpage=4
					nextpage=true;				
				}else if(currentpage==3){
					list=[
						{id:1,text:"111111111111111"},
						{id:2,text:"121212"},
						{id:3,text:"131313"},
						{id:4,text:"141414"},
						{id:5,text:"15515"},
					]
					allpage=4
					nextpage=true;				
				}else if(currentpage==4){
					list=[
						{id:1,text:"161616"},
						{id:2,text:"171717"},
						{id:3,text:"181818"}
					]
					allpage=4
					nextpage=false;				
				}
				dispatch({type:"GET_LIST",
						list:list,
						allpage:allpage,
						currentpage:currentpage,
						nextpage:nextpage})
			
			},200);
			
		}
	};
}

//封装传递state和dispatch
var PageShowReactRedux = connect(mapStateToProps,mapDispatchToProps)(PageShow);

export default PageShowReactRedux

效果如下：

143703_rL7w_2352644.png

4.跳页功能处理，阻止溢出bug

我们总页数是7，如果用户输入1-7之外的数组或者输入汉字和字母我们应该提示用户输入数据异常，不执行跳转：

DiReactPage.js:

import React, { Component } from 'react';

//=====分页组件=====

class DiReactPage extends Component {
	constructor(props) {
		super(props);
		
	}
	
	render() {
		//显示控制
		var currentpage=this.props.currentpage;
		var pages=[];
		if(this.props.allpage>=5){
			if(currentpage+5>this.props.allpage){
				for(var i=currentpage;i<=this.props.allpage;i++){
					pages.push(i);
				};
			}else{
				for(var i=currentpage;i<currentpage+5;i++){
					pages.push(i);
				};
			};
		}else{
			for(var i=currentpage;i<=this.props.allpage;i++){
				pages.push(i);
			};
		};	
		return (
			<div className="DiReactPage"  style={{display:this.props.allpage<=0?"none":"block"}}>
				<div className="DiReactPage-btn" onClick={this.diFirst.bind(this)}>第一页</div>
				<div className={this.props.currentpage==1?"DiReactPage-btn disable":"DiReactPage-btn"} onClick={this.diPrev.bind(this)}>上一页</div>
				<div className="DiReactPage-page">
					{
						pages.map(function(item,i){
							return <span key={i} className={currentpage==item?"active":""} onClick={this.diCurrent.bind(this,item)}>{item}</span>
						}.bind(this))
					}
				</div>
				<div className={this.props.currentpage==this.props.allpage?"DiReactPage-btn disable":"DiReactPage-btn"} onClick={this.diNext.bind(this)}>下一页</div>
				<div className="DiReactPage-btn"  onClick={this.diLast.bind(this)}>最后一页</div>
				<div className="DiReactPage-btn">总{this.props.allpage}页</div>
				<input className="DiReactPage-input" type="text" ref="cPage" />
				<button className="DiReactPage-skip"  onClick={this.diSkip.bind(this)}>跳转</button>
			</div>
		);
	}

	diFirst(){
		//alert(1)
		this.props.GETLIST(1);
	}
	diPrev(){
		//alert(this.props.currentpage-1)
		if(this.props.currentpage-1<1){
			return false;
		}
		this.props.GETLIST(this.props.currentpage-1);
	}
	
	diCurrent(page){
		//alert(page)
		this.props.GETLIST(page);
	}	
	
	diNext(){
		//alert(this.props.currentpage+1)
		if(this.props.currentpage+1>this.props.allpage){
			return false;
		}
		this.props.GETLIST(this.props.currentpage+1);
	}
	
	diLast(){
		//alert(this.props.allpage)
		this.props.GETLIST(this.props.allpage);
	}
	diSkip(){
		//alert(this.refs.cPage.value)
		if(isNaN(this.refs.cPage.value)){
			console.log("必须是数字")
			return false;
		}
		if(this.refs.cPage.value<1 || this.refs.cPage.value>this.props.allpage){
			console.log("超过范围")
			return false;
		}
		this.props.GETLIST(this.refs.cPage.value);
	}
	componentDidMount() {
	  	console.log("我是分页组件");
	}
	
}


export default DiReactPage

七.总结

我们这时候一个简单的分页组件就封装完毕。

DiReactPage.js:

import React, { Component } from 'react';

//=====分页组件=====

class DiReactPage extends Component {
	constructor(props) {
		super(props);
		
	}
	
	render() {
		//显示控制
		var currentpage=this.props.currentpage;
		var pages=[];
		if(this.props.allpage>=5){
			if(currentpage+5>this.props.allpage){
				for(var i=currentpage;i<=this.props.allpage;i++){
					pages.push(i);
				};
			}else{
				for(var i=currentpage;i<currentpage+5;i++){
					pages.push(i);
				};
			};
		}else{
			for(var i=currentpage;i<=this.props.allpage;i++){
				pages.push(i);
			};
		};	
		return (
			<div className="DiReactPage"  style={{display:this.props.allpage<=0?"none":"block"}}>
				<div className="DiReactPage-btn" onClick={this.diFirst.bind(this)}>第一页</div>
				<div className={this.props.currentpage==1?"DiReactPage-btn disable":"DiReactPage-btn"} onClick={this.diPrev.bind(this)}>上一页</div>
				<div className="DiReactPage-page">
					{
						pages.map(function(item,i){
							return <span key={i} className={currentpage==item?"active":""} onClick={this.diCurrent.bind(this,item)}>{item}</span>
						}.bind(this))
					}
				</div>
				<div className={this.props.currentpage==this.props.allpage?"DiReactPage-btn disable":"DiReactPage-btn"} onClick={this.diNext.bind(this)}>下一页</div>
				<div className="DiReactPage-btn"  onClick={this.diLast.bind(this)}>最后一页</div>
				<div className="DiReactPage-btn">总{this.props.allpage}页</div>
				<input className="DiReactPage-input" type="text" ref="cPage" />
				<button className="DiReactPage-skip"  onClick={this.diSkip.bind(this)}>跳转</button>
			</div>
		);
	}

	diFirst(){
		//alert(1)
		this.props.GETLIST(1);
	}
	diPrev(){
		//alert(this.props.currentpage-1)
		if(this.props.currentpage-1<1){
			return false;
		}
		this.props.GETLIST(this.props.currentpage-1);
	}
	
	diCurrent(page){
		//alert(page)
		this.props.GETLIST(page);
	}	
	
	diNext(){
		//alert(this.props.currentpage+1)
		if(this.props.currentpage+1>this.props.allpage){
			return false;
		}
		this.props.GETLIST(this.props.currentpage+1);
	}
	
	diLast(){
		//alert(this.props.allpage)
		this.props.GETLIST(this.props.allpage);
	}
	diSkip(){
		//alert(this.refs.cPage.value)
		if(isNaN(this.refs.cPage.value)){
			console.log("必须是数字")
			return false;
		}
		if(this.refs.cPage.value<1 || this.refs.cPage.value>this.props.allpage){
			console.log("超过范围")
			return false;
		}
		this.props.GETLIST(this.refs.cPage.value);
	}
	componentDidMount() {
	  	console.log("我是分页组件");
	}
	
}


export default DiReactPage

调用方式：

144319_Axgr_2352644.png

我们这个分页组件只是一个思想的梳理，是非常简单的，更复杂的我们可以加入更多的处理。

 

转载于:https://my.oschina.net/tbd/blog/1551890

weixin_34319374
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React:table组件/Pagination分页组件/Dialog组件 - 点击单元格内容显示弹窗，弹窗的内容由表格内容控制（1）
thingjustthing的博客
07-13 817
一、首先渲染一个表格，表格内容：一列数据，一列操作列 <Pagination/>是用来分页的分页组件 export default function TableList(){ return ( <> <Card free> <Card.Content> <div className={styles.Main}> ...
react（四）-- render
m0_48942526的博客
10-12 276
component-render if + 组件 (1)函数组件 => 函数组件也叫UI组件、简单组件          (2) <script type="text/babel"> //if + 组件 //(1)函数组件 => 函数组件也叫UI组件、简单组件 function Welcome(props){ return <h1>Welc
推荐一款超实用的React分页组件 - react-js-pagination
最新发布
gitblog_00064的博客
05-08 826
推荐一款超实用的React分页组件 - react-js-pagination 项目地址:https://gitcode.com/wwwaiser/react-js-pagination 在构建数据驱动的应用时，分页功能常常是不可或缺的一部分。今天，我们向您推荐一个高效且易于使用的React分页组件——react-js-pagination。它是一个"愚蠢"（即无状态）的组件，...
react ant的＜table＞中可以设置pagination实现自动分页
u014354985的博客
03-25 4307
pagination分页 数组分割
react-pagination:简单但可配置的React分页组件
05-21
React分页 React分页是使用React构建的非常简单但可配置的分页组件。 安装 bower install react-pagination 或者 npm install react-pagination 原料药 当通过react-pagination.min.js包含在浏览器中时，所有内容都会在reactPagination变量中公开。 React分页有两件事： pageRange ：返回给定参数的页面范围的函数（稍后讨论） Pagination ：组件本身 pageRange 返回一个数组，其中包含根据传递的参数显示的页面范围。 参数： selected已选择的页码 numPages总页数 num要显示的页数 返回页面（数字）数组。 例子： pageRange ( 1 , 10 , 5 ) ; // => [1, 2, 3, 4, 5] pageRange
react-一款简单的react组件实现的分页
08-15
"react-一款简单的react组件实现的分页"是一个实例，它展示了如何用React构建一个基础的分页组件。在这个项目中，`reactPagination-master`可能是源代码的主目录。接下来，我们将深入探讨React组件化思想以及如何...
pagination-component:React分页组件
05-13
提供分页的React组件。 安装 npm install pagination-component --save 或者 yarn add pagination-component 演示版 要构建并运行演示： 克隆此存储库： git clone ...
将SVG转换为React组件:lion:-React开发
05-27
将SVG转换为React组件online在线尝试！ 在React Europe上观看演讲npx @ svgr / cli支持SVGR SVGR是MIT许可的开源项目。 这是将SVG转换为React组件online在线尝试！ 在React Europe上观看演讲SVGR将SVG转换为可立即...
react-tournament::trophy:React Tournament组件:TOP_arrow:
05-06
:trophy: React Tournament组件 :TOP_arrow: 演示版 用法 700宽度表 自动宽度表 大桌子 自定义样式表 如何使用 要安装软件包： # npm npm install react-tournament --save # yarn yarn add react-tournament...
react从入门到精通+项目开发等
di_pingxian的博客
11-28 166
本资源内容丰富，包含了基础入门知识，结构项目，测试，进阶，项目开发，以及一些高级技巧等等。 想学react的同学一定要把这个资源保存好，别的地方没有那么全的资料。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 它是一个用于构建用户界面的 JAVASCRIPT 库。主要用于构建UI，很多人认为 React 是 MVC 中的 ...
pagination:React分页
04-29
分页 React分页组件。 发展 npm install npm start 例子 在线示例： : 安装 用法 import Pagination from 'rc-pagination' ; ReactDOM . render ( < Pagination> , container ) ; 原料药 范围 描述 类型 默认 残障人士 禁用分页 布尔 -- defaultCurrent 不受控制的当前页面 数字 1个 当前的 当前页面 数字 不明确的 全部的 项目总数 数字 0 defaultPageSize 每页默认项目 数字 10 页面大小 每页项目 数字 10 onChange 页面更改回调 功能（当前，pageSize） -- showSizeChanger 显示页面大小更改器 布尔 false总少那么当totalBoundaryShowSizeC
react antd Pagination函数组件怎么实现切换页面更新数据，代码展示
weixin_35755562的博客
02-16 427
React Antd 的 Pagination 组件可以通过监听页码变化的事件来更新数据。 具体来说，你可以在 Pagination 组件的 onChange 回调函数中处理页码变化事件，当用户点击不同的页码时，就可以在该回调函数中调用更新数据的方法，并将新数据渲染到页面上。 以下是一个示例代码，展示如何使用 Pagination 组件实现切换页面更新数据： import { useState, ...
reactd之类组件生命周期
m0_58001779的博客
07-14 130
在react中只有类组件有生命周期，函数组件是没有滴 一、初始化 1.static getDerivedStateFromProps(){ return{ } } 2.render() 3.componentDidMount(){ 可以在这个生命周期内进行异步请求，适用于只执行一次的异步请求，如果异步请求执行不止一次，每次相关状态跟新的时候也要发送请求，这个时候就要利用运行生命周期中的第一个和最后一个生命周期函数结合实现 这个生命周期还可以绑定事件，写订阅函数，...
创建React分页组件
变异的程序员博客
11-26 750
初次使用React，开发过程中必不可少的要使用分页组件，刚开始准备找一个现成的代码，找了一圈发现要么太烂要么就是需要引入框架，不想将就又不想引入新的框架就只好自己造轮子了。
react实现分页-封装组件
weixin_43695726的博客
07-25 1079
react实现分页-封装分页组件。用户上拉加载更多
react pagination
weixin_34295316的博客
04-11 381
class AppPagination extends React.Component { handleChange(pageNum) { this.props.handleChangePage(pageNum); } showTotalPage() { return `共 ${this.props.total} 条`; ...
React 不使用脚手架实现点击tab切换内容
weixin_58405903的博客
01-12 349
内容随着按钮一起切换 创建一个id <div id="test"></div> 引入react <!-- react 核心模块 --> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <!-- react-dom 控制元素的dom操作，他是react的一个扩展库 --> <script src="htt
React固定Antd的Table组件中的pagination位置
weixin_42764438的博客
10-28 5900
React固定Antd的Table组件中的pagination位置初始效果 初始效果 点击第二页后当数据不足5条时pagination会上移到最后一条数据下方
react 函数组件 前端实现分页
05-30
React 函数组件的分页实现，可以通过以下步骤来完成： 1. 定义组件的状态：当前页码、每页显示数量、总数据量等。 ``` const [currentPage, setCurrentPage] = useState(1); const [pageSize, setPageSize] = useState(10); const [total, setTotal] = useState(0); ``` 2. 定义获取数据的方法，并在组件挂载时调用该方法。 ``` useEffect(() => { fetchData(); }, []); const fetchData = async () => { const response = await fetch(`http://api.example.com/data?page=${currentPage}&pageSize=${pageSize}`); const data = await response.json(); setTotal(data.total); setData(data.items); } ``` 3. 定义分页器组件，并传入当前页码、每页显示数量、总数据量等参数。 ``` const Pagination = ({ currentPage, pageSize, total, onChange }) => { const pageCount = Math.ceil(total / pageSize); const pages = Array.from({ length: pageCount }, (_, i) => i + 1); return ( <ul> {pages.map(page => ( <li key={page} className={page === currentPage ? 'active' : ''} onClick={() => onChange(page)}> {page} </li> ))} </ul> ); }; ``` 4. 在组件中使用分页器，并在分页器页码变化时调用获取数据的方法。 ``` <Pagination currentPage={currentPage} pageSize={pageSize} total={total} onChange={setCurrentPage} /> {data.map(item => ( // 显示数据项 ))} ``` 通过以上步骤，即可实现基于 React 函数组件的前端分页功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值