使用 React 进行分页

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 - null，但我的条件也不起作用。例如：

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

它允许您自定义所有内容（数字按钮、包装容器、展开等）。它的文档很好，demo也很清晰。