使用React Hook 开发一个3kb的分页组件

今天在工作中需要一个分页组件,(React环境),为了减小代码体积,所以没有用组件库Antd,最终选择手写一个组件

index.js

import React from 'react'
import { useState, useCallback, useEffect } from 'react'
import './index.css'
export default function Pagination({ total = 100, onChange = null }) {
  const [now, setNow] = useState(1);//*当前页码
  const [leftStepper, setLeftStepper] = useState(false); //*左侧的省略号
  const [rightStepper, setRightStepper] = useState(false);//*右侧的省略号
  const [$node, $setNode] = useState([]); //*节点渲染数组

  useEffect(function () {
    // initState()
    watcher(now)
  }, [])




  const watcher = useCallback(function (now) {
    setLeftStepper(now - 4 > 0)
    setRightStepper(now + 4 < total)
    if (now < 4) {
      $setNode([2, 3, 4, 5, 6])
    } else if (now >= total - 4) {
      $setNode([total - 5, total - 4, total - 3, total - 2, total - 1])
    } else {
      $setNode([now - 2, now - 1, now, now + 1, now + 2])
    }
  })

  const pageChanging = useCallback(num => {
    setNow(num)
    watcher(num)
    onChange && onChange(num)
  })

  const onPrev = useCallback(() => {
    if (now - 1 < 1) return
    pageChanging(now - 1)
  })


  const onNext = useCallback(() => {
    if (now + 1 > total) return
    pageChanging(now + 1)
  })


  const onSetStep = useCallback((distance) => {
    if (now + (distance) < 1) {
      pageChanging(1)
    } else if (now + (distance) > total) {
      pageChanging(total)
    } else {
      pageChanging(now + (distance))
    }
  })


  return <ul className="x-pagination-root x-clearfix">
    <li onClick={onPrev}>
      <button disabled={now == 1} className="x-pagination-item x-pagination-prev">上一页</button>
    </li>
    <li
      onClick={pageChanging.bind(null, 1)}
      className={now == 1 ? "x-pagination-item x-pagination-actived" : "x-pagination-item"}>1</li>
    {leftStepper && <li className="x-pagination-item x-pagination-point-prev" onClick={() => onSetStep(-5)}>
      <span className="x-pagination-left"></span>
    </li>}
    {
      $node.map(function (num, index) {
        return <li
          className={now == num ? "x-pagination-item x-pagination-actived" : "x-pagination-item"}
          key={index}
          onClick={pageChanging.bind(null, num)}
        >{num}</li>
      })
    }
    {rightStepper && <li
      className="x-pagination-item x-pagination-point-next" onClick={() => onSetStep(5)}>
      <span className="x-pagination-right"></span>
    </li>}
    {total > 1 && <li
      onClick={pageChanging.bind(null, total)}
      className={now == total ? "x-pagination-item x-pagination-actived" : "x-pagination-item"}>{total}</li>}
    <li onClick={onNext} >
      <button className="x-pagination-item x-pagination-next" disabled={now == total}>下一页</button>
    </li>
  </ul >
}

index.css

.x-pagination-root {
  height: 50px;
  /* background-color: #199199; */
}
.x-clearfix {
  display: flex;
  align-items: center;
}
.x-clearfix::after {
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
  display: block;
}
.x-pagination-item {
  float: left;
  color: #81858A;
  padding: 2px 12px;
  margin: 0 5px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #E8E7E7;
  transition: all 0.1s linear;
}
.x-pagination-item:hover {
  border: 1px solid #1397A8;
}

.x-pagination-actived {
  color: #fff;
  background-color: #1397A8;
  border: 1px solid #1397A8;
}


.x-pagination-prev,.x-pagination-next {
  outline: none;
  background-color: transparent;
}


.x-pagination-prev:disabled,.x-pagination-next:disabled {
  cursor: not-allowed;
}




/* 省略号 */
.x-pagination-point-next,.x-pagination-point-prev {
  position: relative;
}

.x-pagination-right::after,.x-pagination-left::after {
  content: '···';
}

.x-pagination-point-next:hover  .x-pagination-right::after{
  content: "»";
  font-size: 14px;
  font-family: '黑体';
  vertical-align: middle;
  color: #1397A8;
}
.x-pagination-point-prev:hover  .x-pagination-left::after{
  content: "«";
  font-size: 14px;
  font-family: '黑体';
  vertical-align: middle;
  color: #1397A8;
}

如果想直接拿过来就用的话,可以去Github上直接复制文件下来,在项目中引入组件就行
Github分页组件地址
如果对你有帮助,希望点个star