Question

我正在尝试在ReactJs中构建一个Pagination组件。我目前正试图让组件在currentPage之前和之后显示两个索引。例如，如果currentPage为3，则应显示1 2 3 4 5，如果currentPage为6，则应显示4 5 6 7 8，依此类推。如果一个索引不可用，它就不会被显示出来，就像第一页在它之前不会有两个索引一样，所以它只会显示1 2 3。

我有一个Array，其中totalPages列表作为props和currentPage发送。我有以下逻辑，我使用splice来限制数组的内容

import React, {PropTypes} from 'react';
import styles from './Pagination.css';

const Pagination = ( {totalPages, currentPage, updateOnPageChange} ) => {
    let curr = currentPage,start = 0,end = parseInt(currentPage)+2;
    {(curr == 1 || curr == 2 )? start = 0 : start = parseInt(currentPage) - 2 }
    console.log(start + " " + currentPage +" "+totalPages+" "+end);
    return (
        <div className="pagination-div">
            <div className="pagination-wrapper">
                {
                    Array(totalPages).fill(1).slice(start,end).map((el, i) => (
                         <div className="number-wrapper" onClick={updateOnPageChange}>
                            {  
                               i+1 == currentPage ? <p className="current"><strong>{i+1}</strong</p>:<p>{i+1}</p>
                            }
                         </div>
                    ))
                }
            </div>
        </div>
    );
};

Pagination.propTypes = {
    totalPages: PropTypes.number.isRequired,
    currentPage: PropTypes.number.isRequired,
    updateOnPageChange: PropTypes.func.isRequired,
};

export default Pagination;

该组件适用于当前页面1和2，但在此之后，它仅显示最多4个页面的所有页面。我无法弄清楚为什么会这样，我有34页因此我知道我没有用完页面。

任何帮助都将非常感谢

编辑 - 我注意到如果我将零或任何其他数字作为切片函数的第一个参数，它会显示数字直到currentPage + 2（因此逻辑以单向工作）。我添加表达式或变量的那一刻似乎无法发挥作用。

Answer 1

您正在映射切片数组的索引，这就是为什么总是得到从0到end - 1的范围，因为切片后的数组始终从0开始索引。为了修复代码，首先，map用于纠正网页索引的内容，然后执行slice。

Array(totalPages)
.fill(1)
.map((el, i) => i + 1)
.slice(start,end)
.map(pageNumber => (
  <div className="number-wrapper" onClick={updateOnPageChange}>
  { pageNumber == currentPage 
  ? <p className="current"><strong>{pageNumber}</strong</p>
  : <p>{pageNumber}</p>
  }
  </div>
)

使用slice（）基于currentPage值显示数组的有限部分

1 个答案: