簡單的分頁組件(react)實現的一個分頁的效果（代碼）

本篇文章給大家帶來的內容是關於簡單的分頁組件(react)實現的一個分頁的效果（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

簡單的分頁組件
...由於工作原因, 寫過一段vue, 現在入手jquery.自己是戰五渣選手，為了鞏固之前學過的react，特意用react來實現，其實想用jquery。 github L6zt
代碼效果:

思路：
組件基本屬性:
cur 當前頁碼，
all 總頁碼
space 頁面顯示數量 +1 才是 總數量
組件整體狀態

1、與首頁相連, cur < space 基本滿足

2、中間狀態，cur > space && cur < all - space

3、與末尾相連,cur > all - space

react 基本操作
子組件Pagination 通過 props 更新狀態, 和state無關。
show code

// 判斷 是不是數字const isNumber = (num) => {    return typeof num === 'number';}class Pagination extends  React.Component {    constructor (props) {        super(props);    }    // 點擊回調事件        handleClick (item) {      // 父組件回調事件      this.props.cb(item);    }    render () {        let {cur, space, all} = this.props;        let pgObj = [];        // 給不同的元素 賦值class        const checkClass = (role, active) => {            const defaultClass = 'pg-span';            if (active) {                return    `${defaultClass} active`            }            switch (role) {                case 0: {                    return `${defaultClass}`                }                case 1: {                    return `${defaultClass}`                }                default: {                                }            }        }        // 初始檢查        if (all < space) {            all =  space        }        if (cur <= 0) {            cur = 0        }        if (cur >= all) {        cur = all        }         // 階段判斷        if (cur < space) {            if (space === all) {                for (let i = 1; i <= space; i++) {                    pgObj.push({                        page: i,                        role: 0,                        key: i                    })                }            } else {                for (let i = 1; i <= space; i ++) {                    pgObj.push({                        page: i,                        role: 0,                        key: i                    })                }                pgObj.push({                    page: '...',                    role: 1,                    key: 'next'                })                pgObj.push({                    page: all,                    role: 0,                    key: all                })            }        } else if (cur >= space && cur <= all - space + 1) {            let odd = parseInt(space / 2);            pgObj.push({                page: 1,                role: 0,                key: 1            });            pgObj.push({                page: '...',                role: 1,                key: 'pre'            });            for (let i = cur - odd; i <= cur + odd ; i ++) {                pgObj.push({                    page: i,                    role: 1,                    key: i                })            }            pgObj.push({                page: '...',                role: 1,                key: 'next'            });            pgObj.push({                page: all,                role: 1,                key: all            })        } else {            pgObj.push({                page: 1,                role: 0,                key: 1            });            pgObj.push({                page: '...',                role: 1,                key: 'pre'            });            for (let i = all - space + 1; i <= all; i ++) {                pgObj.push({                    page: i,                    role: 0,                    key: i                })            };        }        return (            <section>                {                    pgObj.map(item =>                        (<span key={item.key}                               className={checkClass(item.role, item.page === cur)}                               onClick={() => {this.handleClick(item)}}                        >                        {item.page}                        </span>))                }            </section>        )    }    }class Root extends React.Component {  constructor (props) {      super(props);      this.state = {        cur: 1      };      this.handlePagination = this.handlePagination.bind(this);  }  handlePagination (item) {      const {page} = item;      if (isNumber(page)) {          this.setState({              cur: page          })      }  }  render() {    let {cur} = this.state;    console.log(cur);    return  (      <p>         <Pagination cur={cur} all={100} space={8} cb={this.handlePagination} />      </p>    )  }};ReactDOM.render(  <Root></Root>,  document.getElementById('root'));