Example of writing a paging component using react
This article mainly introduces you to using react to write a paging component (summary). I hope it can help you learn to use react to write a paging component. Let's learn it together.
Screenshot of the effect (the style can be modified by yourself):
Build the project
create-react-app react-paging-component
Paging component
1. Subcomponent
Create Pagecomponent.js file
Core code:
Initialization value
constructor(props) {
super(props)
this.state = {
currentPage: 1, //当前页码
groupCount: 5, //页码分组，显示7个页码，其余用省略号显示
startPage: 1, //分组开始页码
totalPage:1 //总页数
}
}Dynamic generation page number function
##
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;
}Page click function:
//页码点击
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)
}Previous page and Xiaye click events
//上一页事件
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)
}The component is rendered to the DOM
render() {
const pageList = this.createPage();
return (
<ul className="page-container">
{pageList}
</ul>
)
}2. Parent component
Create Pagecontainer. js fileComplete code of parent component
##
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 (
<p>
<p>
{this.state.dataList}
</p>
<Pagecomponent pageConfig={this.state.pageConfig}
pageCallbackFn={this.getCurrentPage}/>
</p>
)
}
}
export default PagecontainerRelated recommendations:
##jQuery Detailed explanation of the encapsulated paging component
Paging component implemented using vue2.0
Implementation method of table paging component based on vue2
The above is the detailed content of Example of writing a paging component using react. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to install the Windows 10 old version component DirectPlay
Dec 28, 2023 pm 03:43 PM
Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box
Oracle DECODE function detailed explanation and usage examples
Mar 08, 2024 pm 03:51 PM
The DECODE function in Oracle is a conditional expression that is often used to return different results based on different conditions in query statements. This article will introduce the syntax, usage and sample code of the DECODE function in detail. 1. DECODE function syntax DECODE(expr,search1,result1[,search2,result2,...,default]) expr: the expression or field to be compared. search1,
Go language indentation specifications and examples
Mar 22, 2024 pm 09:33 PM
Indentation specifications and examples of Go language Go language is a programming language developed by Google. It is known for its concise and clear syntax, in which indentation specifications play a crucial role in the readability and beauty of the code. effect. This article will introduce the indentation specifications of the Go language and explain in detail through specific code examples. Indentation specifications In the Go language, tabs are used for indentation instead of spaces. Each level of indentation is one tab, usually set to a width of 4 spaces. Such specifications unify the coding style and enable teams to work together to compile
PHP, Vue and React: How to choose the most suitable front-end framework?
Mar 15, 2024 pm 05:48 PM
PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.
Angular components and their display properties: understanding non-block default values
Mar 15, 2024 pm 04:51 PM
The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.
How to open the settings of the old version of win10 components
Dec 22, 2023 am 08:45 AM
Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open
Integration of Java framework and front-end React framework
Jun 01, 2024 pm 03:16 PM
Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.
Application and example analysis of PHP dot operator
Mar 28, 2024 pm 12:06 PM
Application and example analysis of PHP dot operator In PHP, the dot operator (".") is an operator used to connect two strings. It is very commonly used and very flexible when concatenating strings. By using the dot operator, we can easily concatenate multiple strings to form a new string. The following will introduce the use of PHP dot operators through example analysis. 1. Basic usage First, let’s look at a basic usage example. Suppose there are two variables $str1 and $str2, which store two words respectively.
