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

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

用React进行分页

2 个答案: