本文介绍了尝试自己动手用反应来写一个分页组件(小结),分享给大家,具体如下:
<>强分页效果
在线预览
github地址
效果截图(样式可自行修改):
构建项目
create-react-app react-paging-component
<>强分页组件
<强> 1。子组件
创建Pagecomponent。js文件
核心代码:
<强>初始化值
构造函数(道具){
超级(道具)
这一点。状态={
当前页:1、//当前页码//页groupCount: 5日码分组,显示7个页码,其余用省略号显示
startPage: 1、//分组开始页码
totalPage: 1//总页数
}
}
之前
<强>动态生成页码函数
createPage () {
const {currentPage、groupCount startPage, totalPage}=this.state;
让页面=[]//上一页
pages.push (& lt;李className={currentPage===1 & # 63;“更多”:零}={1}的关键在···& lt;/li>)
}//非第一页和最后一页显示
(让我=startPage;我& lt;pageLength;我+ +){
如果(我& lt;=totalPage - 1,,我在;1){
pages.push (& lt;李className={currentPage===我& # 63;“activePage”:零关键}={我}
关键={2}在···& lt;/li>)
}//最后一页
pages.push (& lt;李className={currentPage===totalPage & # 63;“activePage”:零关键}={totalPage}>//页码点击
pageClick (currentPage) {
const {groupCount}=this.state
const getCurrentPage=this.props.pageCallbackFn;//当当前页码大于分组的页码时,使当前页前面显示两个页码
如果(currentPage祝辞=groupCount) {
this.setState ({
startPage:当前页- 2,
}）
}
如果(当前页& lt;groupCount) {
this.setState ({
startPage: 1、
}）
}//第一页时重新设置分组的起始页
如果(currentPage===1) {
this.setState ({
startPage: 1、
}）
}
this.setState ({
当前页
}）//将当前页码返回父组件
getCurrentPage(当前页)
}
之前
<>强上一页和夏夜点击事件
//上一页事件
prePageHandeler () {
让{currentPage}=this.state
如果(——currentPage===0) {
返回假
}
this.pageClick(当前页)
}//下一页事件
nextPageHandeler () {
让{当前页,totalPage}=this.state//const {totalPage}=this.props.pageConfig;
如果(+ + currentPage比;totalPage) {
返回假
}
this.pageClick(当前页)
}
之前
<强>组件渲染到DOM上
呈现(){
const pageList=this.createPage ();
回报(
& lt; ul className=耙趁嫒萜鳌北?
{pageList}
& lt;/ul>
)
}
<强> 2。父组件
创建Pagecontainer。js文件
<>强父组件完整代码
进口的反应,{组件}从“反应”
从“. ./组件/导入Pagecomponent Pagecomponent”
从“. ./嘲笑/tsconfig.json”导入数据
类Pagecontainer扩展组件{
构造函数(){
super ()
这一点。状态={
dataList: [],
pageConfig: {
totalPage:数据。//总长度页码
}
}
这一点。getCurrentPage=this.getCurrentPage.bind(这)
}
getCurrentPage (currentPage) {
this.setState ({
dataList:数据(currentPage-1) . name
}）
}
呈现(){
回报(
& lt; div>
& lt; div>
{this.state.dataList}
& lt;/div>
& lt; Pagecomponent pageConfig={this.state.pageConfig}
pageCallbackFn={this.getCurrentPage}/比;
& lt;/div>
)
}
}
出口默认Pagecontainer
至此一个分页组件就开发完了,希望对大家的学习有所帮助,也希望大家多多支持。
