分頁與反應

Question

我的分頁正在做一些奇怪的事情。我使用react-pager。

當我點擊第一頁 - 我沒有任何項目（但我聽從他們），當我點擊第二頁時，我有4個項目，當我點擊第三頁時，我的項目剛剛添加到項目從第二頁開始。我的意思是在第三頁上，我有8件舊+新品，而不是像我一樣注意的4件新品。 我覺得片中有些問題。

成分進行：

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import Pager from 'react-pager'; 

class AlbumsShow extends Component { 
    constructor(props) { 
     super(props); 
     this.renderImage = this.renderImage.bind(this); 
     this.handlePageChanged = this.handlePageChanged.bind(this); 

     this.state = { 
      total:  3, 
      current:  1, 
      visiblePage: 2, 
     }; 
    } 

    handlePageChanged(newPage) { 
     this.setState({ current : newPage }); 
    } 

    renderImage() { 
     return this.props.images.slice((this.state.current-1), this.state.current * 4).map(image => (
      <li key={image.id}> 
       <img className="album_img" alt="job" src={image.img} /> 
       <p className="album_title">Test</p> 
      </li> 
     )); 
    } 

    render() { 
     return (
      <div> 
       <div> 
        {this.renderImage()} 
       </div> 
        <Pager 
         total={this.state.total} 
         current={this.state.current} 
         visiblePages={this.state.visiblePage} 
         titles={{ first: '<|', last: '>|' }} 
         className="pagination-sm pull-right" 
         onPageChanged={this.handlePageChanged} 
        /> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state, ownProps) { 
    const currentAlbumId = parseInt(ownProps.params.id, 10); 

    return { 
     images: state.main.albums.filter(album => album.id === currentAlbumId)[0].images, 
    }; 
} 
export default connect(mapStateToProps)(AlbumsShow); 

另外，如果我將有更多的10個項目我的分頁應該是可見的，如果小於10 - 空，但我的條件不工作壓力太大。例如：

  {this.renderImage() > 10 ? 

      <Pager 
       total={this.state.total} 
       current={this.state.current} 
       visiblePages={this.state.visiblePage} 
       titles={{ first: '<|', last: '>|' }} 
       className="pagination-sm pull-right" 
       onPageChanged={this.handlePageChanged} 
      />: null } 

Answer 1

我猜this.state.current是頁碼。所以，你的切片可能是這樣的：

slice(this.state.current * 4, (this.state.current + 1) * 4 - 1)

編輯： 我沒有看到你的第二個問題。如果你不想讓你的分頁如果超過10個項目，你可以這樣做：

{this.props.images.length > 10 ? 

     <Pager 
      total={this.state.total} 
      current={this.state.current} 
      visiblePages={this.state.visiblePage} 
      titles={{ first: '<|', last: '>|' }} 
      className="pagination-sm pull-right" 
      onPageChanged={this.handlePageChanged} 
     />: null } 

編輯2： 哎呀，0而不是1。我編輯上述切片電流開始。

編輯：3： 如果你想顯示所有圖像，當你有少於10個項目，你可以做這樣的事情：

renderImage() { 
    const imgs = this.props.images.length > 10 ? 
     this.props.images.slice(this.state.current * 4, (this.state.current + 1) * 4 - 1) : 
     this.props.images; 
    return imgs.map(image => (
     <li key={image.id}> 
     <img className="album_img" alt="job" src={image.img} /> 
     <p className="album_title">Test</p> 
     </li> 
    )); 
    } 

    render() { 
    return (
     <div> 
     <ul> 
     {this.renderImage()} 
     </ul> 

     {this.props.images.length > 10 ? 

     <Pager 
      total={this.state.total} 
      current={this.state.current} 
      visiblePages={this.state.visiblePage} 
      titles={{ first: '<|', last: '>|' }} 
      className="pagination-sm pull-right" 
      onPageChanged={this.handlePageChanged} 
     /> : null 
     } 
     </div> 
    ); 
    } 

Answer 2

另一個組件處理分頁react-pagination-custom。

<TinyPagination 
    total = {...} 
    selectedPageId = {...} 
    itemPerPage = {...} 
    renderBtnNumber = {...} 
    maxBtnNumbers = {...} 
    preKey = '...' 
    nextKey = '...' 
    {...someOptionalProperties} 
/> 

它允許您自定義一切（數字按鈕，包裝容器，傳播，..）。它的文件很好，演示也很清晰。