페이지 구성 요소(소결)를 react 로 직접 쓰 려 고 시도 합 니 다.

본 고 는 자신 이 직접 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

이로써 한 페이지 구성 요소 가 개발 되 었 습 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 지지 해 주시 기 바 랍 니 다.