分页与反应

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} 
/> 

它允许您自定义一切（数字按钮，包装容器，传播，..）。它的文件很好，演示也很清晰。