欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

嘗試自己動(dòng)手用react來(lái)寫(xiě)一個(gè)分頁(yè)組件(小結(jié))

 更新時(shí)間:2018年02月09日 10:45:51   作者:重慶崽兒Brand  
本篇文章主要介紹了嘗試自己動(dòng)手用react來(lái)寫(xiě)一個(gè)分頁(yè)組件(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了嘗試自己動(dòng)手用react來(lái)寫(xiě)一個(gè)分頁(yè)組件(小結(jié)),分享給大家,具體如下:

分頁(yè)效果

在線預(yù)覽

github地址

效果截圖(樣式可自行修改):

構(gòu)建項(xiàng)目

create-react-app react-paging-component

分頁(yè)組件

1.子組件

創(chuàng)建 Pagecomponent.js 文件

核心代碼:

初始化值

 constructor(props) {
    super(props)
    this.state = {
      currentPage: 1, //當(dāng)前頁(yè)碼
      groupCount: 5, //頁(yè)碼分組,顯示7個(gè)頁(yè)碼,其余用省略號(hào)顯示
      startPage: 1, //分組開(kāi)始頁(yè)碼
      totalPage:1 //總頁(yè)數(shù)
    }
  }

動(dòng)態(tài)生成頁(yè)碼函數(shù)

createPage() {
    const {currentPage, groupCount, startPage,totalPage} = this.state;
    let pages = []
    //上一頁(yè)
    pages.push(<li className={currentPage === 1 ? "nomore" : null} onClick={this.prePageHandeler.bind(this)}
            key={0}>
      上一頁(yè)</li>)

    if (totalPage <= 10) {
      /*總頁(yè)碼小于等于10時(shí),全部顯示出來(lái)*/
      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 {
      /*總頁(yè)碼大于10時(shí),部分顯示*/

      //第一頁(yè)
      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;
      }
      //前面省略號(hào)(當(dāng)當(dāng)前頁(yè)碼比分組的頁(yè)碼大時(shí)顯示省略號(hào))
      if (currentPage >= groupCount) {
        pages.push(<li className="" key={-1}>···</li>)
      }
      //非第一頁(yè)和最后一頁(yè)顯示
      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>)
        }
      }
      //后面省略號(hào)
      if (totalPage - startPage >= groupCount + 1) {
        pages.push(<li className="" key={-2}>···</li>)
      }
      //最后一頁(yè)
      pages.push(<li className={currentPage === totalPage ? "activePage" : null} key={totalPage}
              onClick={this.pageClick.bind(this, totalPage)}>{totalPage}</li>)
    }
    //下一頁(yè)
    pages.push(<li className={currentPage === totalPage ? "nomore" : null}
            onClick={this.nextPageHandeler.bind(this)}
            key={totalPage + 1}>下一頁(yè)</li>)
    return pages;

  }

頁(yè)碼點(diǎn)擊函數(shù):

//頁(yè)碼點(diǎn)擊
  pageClick(currentPage) {
    const {groupCount} = this.state
    const getCurrentPage = this.props.pageCallbackFn;
    //當(dāng) 當(dāng)前頁(yè)碼 大于 分組的頁(yè)碼 時(shí),使 當(dāng)前頁(yè) 前面 顯示 兩個(gè)頁(yè)碼
    if (currentPage >= groupCount) {
      this.setState({
        startPage: currentPage - 2,
      })
    }
    if (currentPage < groupCount) {
      this.setState({
        startPage: 1,
      })
    }
    //第一頁(yè)時(shí)重新設(shè)置分組的起始頁(yè)
    if (currentPage === 1) {
      this.setState({
        startPage: 1,
      })
    }
    this.setState({
      currentPage
    })
    //將當(dāng)前頁(yè)碼返回父組件
    getCurrentPage(currentPage)
  }

上一頁(yè)和夏夜點(diǎn)擊事件

//上一頁(yè)事件
  prePageHandeler() {
    let {currentPage} = this.state
    if (--currentPage === 0) {
      return false
    }
    this.pageClick(currentPage)
  }

  //下一頁(yè)事件
  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.父組件

創(chuàng)建 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 //總頁(yè)碼
      }
    }
    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

至此一個(gè)分頁(yè)組件就開(kāi)發(fā)完了,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • React報(bào)錯(cuò)Element type is invalid解決案例

    React報(bào)錯(cuò)Element type is invalid解決案例

    這篇文章主要為大家介紹了React報(bào)錯(cuò)Element type is invalid解決案例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • 30分鐘帶你全面了解React Hooks

    30分鐘帶你全面了解React Hooks

    Hooks是一種函數(shù),該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)”React狀態(tài)和生命周期功能。Hooks在類內(nèi)部不起作用 - 它們?cè)试S你無(wú)需類就使用 React。
    2021-05-05
  • react實(shí)現(xiàn)路由動(dòng)畫(huà)跳轉(zhuǎn)功能

    react實(shí)現(xiàn)路由動(dòng)畫(huà)跳轉(zhuǎn)功能

    這篇文章主要介紹了react路由動(dòng)畫(huà)跳轉(zhuǎn)功能,大概思路是下載第三方庫(kù)?引用,創(chuàng)建css文件引用,想要實(shí)現(xiàn)跳轉(zhuǎn)動(dòng)畫(huà)功能,就在那個(gè)組件的根節(jié)點(diǎn)綁定classname屬性即可,在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn),需要的朋友可以參考下
    2023-10-10
  • React如何配置src根目錄@

    React如何配置src根目錄@

    這篇文章主要介紹了React如何配置src根目錄@,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-01-01
  • React如何避免重渲染

    React如何避免重渲染

    這篇文章主要介紹了React如何避免重渲染,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-04-04
  • 五分鐘教你了解一下react路由知識(shí)

    五分鐘教你了解一下react路由知識(shí)

    本文主要介紹了react路由知識(shí),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 深入探討前端框架react

    深入探討前端框架react

    本文帶領(lǐng)大家一起探討前端框架react,涉及到前端框架react相關(guān)知識(shí),對(duì)前端框架react相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • 基于react封裝一個(gè)通用可編輯組件

    基于react封裝一個(gè)通用可編輯組件

    前段時(shí)間接到這樣一個(gè)需求,需要封裝一個(gè)組件實(shí)現(xiàn)可編輯,這個(gè)到底有多通用呢,就是需要在普通的文字展示包括表格,列表等等,所以本文將給大家介紹如何基于react封裝一個(gè)通用可編輯組件,需要的朋友可以參考下
    2024-02-02
  • react?定位組件源碼解析

    react?定位組件源碼解析

    這篇文章主要為大家介紹了react定位組件源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • 關(guān)于React Native 無(wú)法鏈接模擬器的問(wèn)題

    關(guān)于React Native 無(wú)法鏈接模擬器的問(wèn)題

    許多朋友遇到React Native 無(wú)法鏈接模擬器的問(wèn)題,怎么解決呢,本文給大家分享完整簡(jiǎn)便解決方法及配置例題,對(duì)React Native 鏈接模擬器相關(guān)知識(shí)感興趣的朋友一起看看吧
    2021-06-06

最新評(píng)論