Un effet de pagination (code) implémenté par un simple composant de pagination (react)

Le contenu de cet article concerne un effet de pagination (code) implémenté par un simple composant de pagination (react). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aide.

Composant de pagination simple
... Pour des raisons professionnelles, j'ai écrit un morceau de vue, et maintenant je commence avec jquery. niveau joueur, et afin de consolider ce que j'ai appris avant React, j'utilise spécifiquement React pour l'implémenter, mais je souhaite en fait utiliser jquery. github L6zt
L'effet de code est tel qu'indiqué dans la figure :

Idée :
Propriétés de base de le composant :
numéro de page actuel,
numéro total de page
numéro d'affichage de la page d'espace + 1 est le nombre total
état global du composant

1. Connecté à la page d'accueil, cur

2. État intermédiaire, cur > espace && cur

3. Connecté à la fin, cur > >

Opérations de base de ReactLe sous-composant Pagination met à jour l'état via des accessoires, ce qui n'a rien à voir avec l'état . afficher le code

Recommandations associées :

// 判断 是不是数字
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: &#39;...&#39;,
                    role: 1,
                    key: &#39;next&#39;
                })
                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: &#39;...&#39;,
                role: 1,
                key: &#39;pre&#39;
            });
            for (let i = cur - odd; i <= cur + odd ; i ++) {
                pgObj.push({
                    page: i,
                    role: 1,
                    key: i
                })
            }
            pgObj.push({
                page: &#39;...&#39;,
                role: 1,
                key: &#39;next&#39;
            });
            pgObj.push({
                page: all,
                role: 1,
                key: all
            })
        } else {
            pgObj.push({
                page: 1,
                role: 0,
                key: 1
            });
            pgObj.push({
                page: &#39;...&#39;,
                role: 1,
                key: &#39;pre&#39;
            });
            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(&#39;root&#39;)
);

Un exemple d'écriture d'un composant de pagination à l'aide de réagir

Partagez un simple composant de pagination javascript écrit par vous-même_javascript skills

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!