从 react-js-pagination 获取分页器以显示在页面上

本文介绍了从 react-js-pagination 获取分页器以显示在页面上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 React 应用，它是一个购物网站的前端.

我有一个产品页面，我正在尝试将 react-js-pagination 的分页添加到它的底部，这样我就不必一次呈现整个产品列表.

我遵循了 https://www.npmjs 中的分页指南.com/package/react-js-pagination 但我仍然无法显示它(页面的其余部分显示正确).

有人能明白为什么吗?

请查看下面整个页面的代码:

从'react'导入React；从'react-js-pagination'导入分页；从'react-redux'导入{connect}；从redux"导入{bindActionCreators}；从'../actions/changeBrandFilter'导入changeBrandFilter；从'../actions/changePriceFilter'导入changePriceFilter；从'./CategoryOverview'导入CategoryOverview；从'./Filter'导入过滤器；从 './ProductsListItem' 导入 ProductsListItem；从 './ProductsPageContainer.css' 导入 ProductsPageContainerCSS；类 ProductsPage 扩展了 React.Component{createCategoryOverview() {返回 this.props.overview.map(overview => {返回 (<类别概览标题={概述.title}文本={概述.文本}图像={overview.imageSource}alt={overview.imageAlt}/>)})}createBrandFilterList() {返回 this.props.brandFilters.map(filter => {返回 (<过滤器键={filter.brand}id={filter.brand}changeFilter={() =>this.props.changeBrandFilter(filter)}inuse={filter.inuse}禁用={filter.disabled}/>)})}createPriceRangeFilterList() {返回 this.props.priceRangeFilters.map(filter => {返回 (<过滤器键={filter.priceRange}id={filter.priceRange}changeFilter={() =>this.props.changePriceFilter(filter)}inuse={filter.inuse}禁用={filter.disabled}/>)})}filterDivExtenionToggle () {var filterDivExtension = document.querySelector('.filterDivExtension');var chevronUp = document.querySelector('#chevronUp');var chevronDown = document.querySelector('#chevronDown');var 图标；如果(filterDivExtension.style.display === 'block'){filterDivExtension.style.display = '无';chevronUp.style.display = '无';chevronDown.style.display = 'block';} 别的 {filterDivExtension.style.display = 'block';chevronUp.style.display = 'block';chevronDown.style.display = '无';}}创建产品列表(){如果(this.props.products.length > 0){返回 this.props.products.map(product =>{if (this.props.products.indexOf(product) >= this.state.activePage -1 && this.props.products.indexOf(product) < (this.state.activePage*12)) {返回 (<产品列表项键={product.id}品牌={产品.品牌}模型={产品.模型}价格={产品.价格}图像={产品.图像}link={"/"+this.props.match.params.type+"/"+product.id}/>)}})} 别的 {return <div>没有产品符合上面选择的过滤条件.</div>}}构造函数(道具){超级(道具)；this.state = {activePage: 1};}handlePageChange(pageNumber) {this.setState({activePage: pageNumber});}使成为 () {返回 (<div><div className="容器">{this.createCategoryOverview()}<div ClassName="row"><div className="filterDiv col-12"><div className="iconCrossbar"><i id="chevronDown" className="fa fa-chevron-down" onClick={this.filterDivExtenionToggle}></i><i id="chevronUp" className="fa fa-chevron-up" onClick={this.filterDivExtenionToggle}></i>

从'react'导入React；class Paginaton 扩展 React.Component {使成为 () {返回 (<div className="row"><div className="分页"><button id="prevPage" className="btn" disabled={this.props.disabled1} onClick={() =>this.props.onclick1()}>prev</button><button id="nextPage" className="btn" disabled={this.props.disabled2} onClick={() =>this.props.onclick2()}>next</button>

)}}导出默认分页；

从'react'导入React；从'react-redux'导入{connect}；从redux"导入{bindActionCreators}；从'../actions/changeBrandFilter'导入changeBrandFilter；从'../actions/changePriceFilter'导入changePriceFilter；从'./CategoryOverview'导入CategoryOverview；从'./Filter'导入过滤器；从 './ProductsListItem' 导入 ProductsListItem；从 './ProductsPageContainer.css' 导入 ProductsPageContainerCSS；从'./Pagination'导入分页；类 ProductsPage 扩展了 React.Component{createCategoryOverview() {让我 = 1;返回 this.props.overview.map(overview => {我++返回 (<类别概览key={"catOverview"+i}//数组或迭代器中的每个子元素都应该有一个唯一的key"属性标题={概述.title}文本={概述.文本}图像={overview.imageSource}alt={overview.imageAlt}/>)})}createBrandFilterList() {让我 = 1;返回 this.props.brandFilters.map(filter => {我++返回 (<过滤器键={filter.brand+i+"brand"}name={this.props.match.params.type + "brandFilter"}//这样每个单独的单选按钮组(过滤器)只相互引用.(名称在每个组内共享)id={filter.brand}changeFilterResetPageNumber={() =>{this.props.changeBrandFilter(filter);this.handlePageChange(1)}}//如果不重置页面，通常不会在过滤器应用程序上显示任何产品，因为在过滤器应用程序时处于活动状态的页面上仍保留activePage状态inuse={filter.inuse}/>)})}createPriceRangeFilterList() {让我 = 1;返回 this.props.priceRangeFilters.map(filter => {我++返回 (<过滤器键={filter.priceRange+i+"priceRange"}名称={this.props.match.params.type + "priceFilter"}id={filter.priceRange}changeFilterResetPageNumber={() =>{this.props.changePriceFilter(filter);this.handlePageChange(1)}}inuse={filter.inuse}/>)})}filterDivExtenionToggle () {var filterDivExtension = document.querySelector('.filterDivExtension');var chevronUp = document.querySelector('#chevronUp');var chevronDown = document.querySelector('#chevronDown');var 图标；如果(filterDivExtension.style.display === 'block'){filterDivExtension.style.display = '无';chevronUp.style.display = '无';chevronDown.style.display = 'block';} 别的 {filterDivExtension.style.display = 'block';chevronUp.style.display = 'block';chevronDown.style.display = '无';}}创建产品列表(){如果(this.props.products.length > 0){返回 this.props.products.map(product =>{if (this.props.products.indexOf(product) >= (this.state.activePage*12) - 12 && this.props.products.indexOf(product) <(this.state.activePage*12))) {//渲染当前(活动)页面对应的12个(每页产品数量)产品返回 (<产品列表项键={product.id}品牌={产品.品牌}模型={产品.模型}价格={产品.价格}图像={产品.图像}link={"/"+this.props.match.params.type+"/"+product.id}/>)}})} 别的 {return <div>没有产品符合上面选择的过滤条件.</div>}}状态 = {活动页面:1}handlePageChange(pageNumber) {this.setState({activePage: pageNumber});}创建分页(){如果(this.props.products.length > 12){if (this.props.products.length > this.state.activePage * 12 && this.state.activePage > 1) {//如果当前页面之前和之后有产品返回 (<分页onclick1={() =>this.handlePageChange(this.state.activePage - 1)}onclick2={() =>this.handlePageChange(this.state.activePage + 1)}禁用 1={假}禁用2={假}/>)} else if (this.props.products.length > this.state.activePage * 12) {//如果当前页面后面只有产品返回 (<分页onclick1={() =>this.handlePageChange(this.state.activePage - 1)}onclick2={() =>this.handlePageChange(this.state.activePage + 1)}禁用 1={真}禁用2={假}/>)} else if (this.state.activePage > 1) {//如果当前页面之前只有产品返回 (<分页onclick1={() =>this.handlePageChange(this.state.activePage - 1)}onclick2={() =>this.handlePageChange(this.state.activePage + 1)}禁用 1={假}disabled2={真}/>)}}}使成为 () {返回 (<div><div className="容器">{this.createCategoryOverview()}<div className="row"><div className="filterDiv col-12"><div className="iconCrossbar"><i id="chevronDown" className="fa fa-chevron-down" onClick={this.filterDivExtenionToggle}></i><i id="chevronUp" className="fa fa-chevron-up" onClick={this.filterDivExtenionToggle}></i><div className="filterDivExtension"><div className="row"><div className="filtersList col-md-6 col-12">按品牌过滤:<div>{this.createBrandFilterList()} <div className="filtersList col-md-6 col-12">按价格范围过滤:<div>{this.createPriceRangeFilterList()} <div className="row productsList">{this.createProductsList()} {this.createPagination()}

)}};函数 mapStateToProps(state , ownProps) {让品牌过滤器 = state.brandFilters;让filtered_brandFilters = 品牌过滤器；过滤品牌过滤器 = 过滤品牌过滤器.过滤器(过滤器 =>filter.type === ownProps.match.params.type//从路由参数中获取类型并找到类型匹配的产品)让 priceRangeFilters = state.priceRangeFilters;让filtered_priceRangeFilters = priceRangeFilters;过滤的价格范围过滤器 = 过滤的价格范围过滤器.过滤器(过滤器 =>filter.type === ownProps.match.params.type)让概览 = state.overviews;让概览 = 概览.过滤器(概述 =>概览.type === ownProps.match.params.type)让产品 = state.products;让filtered_products = 产品；过滤产品 = 过滤产品.过滤器(产品 =>product.type === ownProps.match.params.type)让 activeBrandFilters = filters_brandFilters.filter(项目 =>item.inuse === 真);activeBrandFilters.forEach(filter => {如果(过滤器品牌！=所有"){过滤产品 = 过滤产品.过滤器(产品 =>product.brand === filter.brand)}});让 activePriceRangeFilters = filters_priceRangeFilters.filter(项目 =>item.inuse === 真);activePriceRangeFilters.forEach(filter => {如果(过滤器.价格范围！=所有"){过滤产品 = 过滤产品.过滤器(产品 =>product.priceRange === filter.priceRange);}});让键 = ownProps.match.params.type;返回 {概述:概述，品牌过滤器:filtered_brandFilters，priceRangeFilters:filtered_priceRangeFilters，产品:filtered_products，key: key//key 属性的改变意味着组件重新挂载.这是必需的，以便当在产品的第二页(状态为 activePage:2)并切换到具有产品类型的页面"时，没有第二页(使用相同的组件但显示不同类型的产品)，没有产品将显示因为组件没有重新安装并且状态保持不变(activePage 没有重置为 1)};};函数 mapDispatchToProps(dispatch){return bindActionCreators({changeBrandFilter: changeBrandFilter, changePriceFilter: changePriceFilter}, dispatch);};export const ProductsPageContainer = connect(mapStateToProps, mapDispatchToProps)(ProductsPage);

import React from 'react'; import Pagination from 'react-js-pagination'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import changeBrandFilter from '../actions/changeBrandFilter'; import changePriceFilter from '../actions/changePriceFilter'; import CategoryOverview from './CategoryOverview'; import Filter from './Filter'; import ProductsListItem from './ProductsListItem'; import ProductsPageContainerCSS from './ProductsPageContainer.css'; class ProductsPage extends React.Component{ createCategoryOverview() { return this.props.overview.map(overview => { return ( <CategoryOverview title={overview.title} text={overview.text} image={overview.imageSource} alt={overview.imageAlt} /> ) }) } createBrandFilterList() { return this.props.brandFilters.map(filter => { return ( <Filter key={filter.brand} id={filter.brand} changeFilter={() => this.props.changeBrandFilter(filter)} inuse={filter.inuse} disabled={filter.disabled} /> ) }) } createPriceRangeFilterList() { return this.props.priceRangeFilters.map(filter => { return ( <Filter key={filter.priceRange} id={filter.priceRange} changeFilter={() => this.props.changePriceFilter(filter)} inuse={filter.inuse} disabled={filter.disabled} /> ) }) } filterDivExtenionToggle () { var filterDivExtension = document.querySelector('.filterDivExtension'); var chevronUp = document.querySelector('#chevronUp'); var chevronDown = document.querySelector('#chevronDown'); var icon; if (filterDivExtension.style.display === 'block') { filterDivExtension.style.display = 'none'; chevronUp.style.display = 'none'; chevronDown.style.display = 'block'; } else { filterDivExtension.style.display = 'block'; chevronUp.style.display = 'block'; chevronDown.style.display = 'none'; } } createProductsList() { if(this.props.products.length > 0) { return this.props.products.map(product =>{ if (this.props.products.indexOf(product) >= this.state.activePage -1 && this.props.products.indexOf(product) < (this.state.activePage*12)) { return ( <ProductsListItem key={product.id} brand={product.brand} model={product.model} price={product.price} image={product.image} link={"/"+this.props.match.params.type+"/"+product.id} /> ) } })} else { return <div>No products match the filter criteria selected above.</div> } } constructor(props) { super(props); this.state = {activePage: 1}; } handlePageChange(pageNumber) { this.setState({activePage: pageNumber}); } render () { return ( <div> <div className="container"> {this.createCategoryOverview()} <div ClassName="row"> <div className= "filterDiv col-12"> <div className="iconCrossbar"> <i id="chevronDown" className="fa fa-chevron-down" onClick={this.filterDivExtenionToggle}></i> <i id="chevronUp" className="fa fa-chevron-up" onClick={this.filterDivExtenionToggle}></i> </div> <div className="filterDivExtension"> <div className="row"> <div className="filtersList col-md-6 col-12"> Filter by Brand: <div> {this.createBrandFilterList()} </div> </div> <div className="filtersList col-md-6 col-12"> Filter by Price Range: <div> {this.createPriceRangeFilterList()} </div> </div> </div> </div> </div> </div> <div className="row productsList"> {this.createProductsList()} </div> </div> <Pagination activePage={this.state.activePage} itemsCountPerPage={12} totalItemsCount={this.props.products.length} pageRangeDisplayed={2} onChange={this.handlePageChange} /> </div> ) } }; function mapStateToProps(state , ownProps) { let brandFilters = state.brandFilters; let filtered_brandFilters = brandFilters; filtered_brandFilters = filtered_brandFilters.filter( filter => filter.type === ownProps.match.params.type ) let priceRangeFilters = state.priceRangeFilters; let filtered_priceRangeFilters = priceRangeFilters; filtered_priceRangeFilters = filtered_priceRangeFilters.filter( filter => filter.type === ownProps.match.params.type ) let products = state.products; let overviews = state.overviews; let overview = overviews.filter( overview => overview.type === ownProps.match.params.type ) let filtered_products = products; filtered_products = filtered_products.filter( product => product.type === ownProps.match.params.type //gets type from the the route params and finds products which have type that matches ) let activeBrandFilters = brandFilters.filter( item => item.inuse === true ); activeBrandFilters.forEach(filter => { filtered_products = filtered_products.filter( product => product.brand === filter.brand ) }); let activePriceRangeFilters = priceRangeFilters.filter( item => item.inuse === true ); activePriceRangeFilters.forEach(filter => { filtered_products = filtered_products.filter( product => product.priceRange === filter.priceRange ); }); return { overview: overview, brandFilters: filtered_brandFilters, priceRangeFilters: filtered_priceRangeFilters, products: filtered_products }; }; function matchDispatchToProps(dispatch){ return bindActionCreators({changeBrandFilter: changeBrandFilter, changePriceFilter: changePriceFilter}, dispatch); }; export const ProductsPageContainer = connect(mapStateToProps, matchDispatchToProps)(ProductsPage);

import React from 'react'; class Paginaton extends React.Component { render () { return ( <div className="row"> <div className="pagination"> <button id="prevPage" className="btn" disabled={this.props.disabled1} onClick={() => this.props.onclick1()}>prev</button> <button id="nextPage" className="btn" disabled={this.props.disabled2} onClick={() => this.props.onclick2()}>next</button> </div> </div> ) } } export default Paginaton;

import React from 'react'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import changeBrandFilter from '../actions/changeBrandFilter'; import changePriceFilter from '../actions/changePriceFilter'; import CategoryOverview from './CategoryOverview'; import Filter from './Filter'; import ProductsListItem from './ProductsListItem'; import ProductsPageContainerCSS from './ProductsPageContainer.css'; import Pagination from './Pagination'; class ProductsPage extends React.Component{ createCategoryOverview() { let i = 1; return this.props.overview.map(overview => { i++ return ( <CategoryOverview key={"catOverview"+i} //each child in an array or iterator should have a unique "key" prop title={overview.title} text={overview.text} image={overview.imageSource} alt={overview.imageAlt} /> ) }) } createBrandFilterList() { let i = 1; return this.props.brandFilters.map(filter => { i++ return ( <Filter key={filter.brand+i+"brand"} name={this.props.match.params.type + "brandFilter"} //so that each seperate group of radio buttons (filters) refer only to each other. (the name is shared within each group) id={filter.brand} changeFilterResetPageNumber={() => {this.props.changeBrandFilter(filter); this.handlePageChange(1)}} //without page reset would often get no products displayed on filter application due to the activePage state remaining at the page that was active at the time of filter application inuse={filter.inuse} /> ) }) } createPriceRangeFilterList() { let i = 1; return this.props.priceRangeFilters.map(filter => { i++ return ( <Filter key={filter.priceRange+i+"priceRange"} name={this.props.match.params.type + "priceFilter"} id={filter.priceRange} changeFilterResetPageNumber={() => {this.props.changePriceFilter(filter); this.handlePageChange(1)}} inuse={filter.inuse} /> ) }) } filterDivExtenionToggle () { var filterDivExtension = document.querySelector('.filterDivExtension'); var chevronUp = document.querySelector('#chevronUp'); var chevronDown = document.querySelector('#chevronDown'); var icon; if (filterDivExtension.style.display === 'block') { filterDivExtension.style.display = 'none'; chevronUp.style.display = 'none'; chevronDown.style.display = 'block'; } else { filterDivExtension.style.display = 'block'; chevronUp.style.display = 'block'; chevronDown.style.display = 'none'; } } createProductsList() { if(this.props.products.length > 0) { return this.props.products.map(product =>{ if (this.props.products.indexOf(product) >= (this.state.activePage*12) - 12 && this.props.products.indexOf(product) < (this.state.activePage*12)) { //render the 12 (number of products per page) products that correspond to the current (active) page return ( <ProductsListItem key={product.id} brand={product.brand} model={product.model} price={product.price} image={product.image} link={"/"+this.props.match.params.type+"/"+product.id} /> ) } })} else { return <div>No products match the filter criteria selected above.</div> } } state = { activePage: 1 } handlePageChange(pageNumber) { this.setState({activePage: pageNumber}); } createPagination() { if (this.props.products.length > 12) { if (this.props.products.length > this.state.activePage * 12 && this.state.activePage > 1) { //if there are products following AND preceding the current page return ( <Pagination onclick1={() => this.handlePageChange(this.state.activePage - 1)} onclick2={() => this.handlePageChange(this.state.activePage + 1)} disabled1={false} disabled2={false} /> ) } else if (this.props.products.length > this.state.activePage * 12) { //if there are only products following the current page return ( <Pagination onclick1={() => this.handlePageChange(this.state.activePage - 1)} onclick2={() => this.handlePageChange(this.state.activePage + 1)} disabled1={true} disabled2={false} /> ) } else if (this.state.activePage > 1) { //if there are only products preceding the current page return ( <Pagination onclick1={() => this.handlePageChange(this.state.activePage - 1)} onclick2={() => this.handlePageChange(this.state.activePage + 1)} disabled1={false} disabled2={true} /> ) } } } render () { return ( <div> <div className="container"> {this.createCategoryOverview()} <div className="row"> <div className= "filterDiv col-12"> <div className="iconCrossbar"> <i id="chevronDown" className="fa fa-chevron-down" onClick={this.filterDivExtenionToggle}></i> <i id="chevronUp" className="fa fa-chevron-up" onClick={this.filterDivExtenionToggle}></i> </div> <div className="filterDivExtension"> <div className="row"> <div className="filtersList col-md-6 col-12"> Filter by Brand: <div> {this.createBrandFilterList()} </div> </div> <div className="filtersList col-md-6 col-12"> Filter by Price Range: <div> {this.createPriceRangeFilterList()} </div> </div> </div> </div> </div> </div> <div className="row productsList"> {this.createProductsList()} </div> {this.createPagination()} </div> </div> ) } }; function mapStateToProps(state , ownProps) { let brandFilters = state.brandFilters; let filtered_brandFilters = brandFilters; filtered_brandFilters = filtered_brandFilters.filter( filter => filter.type === ownProps.match.params.type //gets type from the the route params and finds products which have type that matches ) let priceRangeFilters = state.priceRangeFilters; let filtered_priceRangeFilters = priceRangeFilters; filtered_priceRangeFilters = filtered_priceRangeFilters.filter( filter => filter.type === ownProps.match.params.type ) let overviews = state.overviews; let overview = overviews.filter( overview => overview.type === ownProps.match.params.type ) let products = state.products; let filtered_products = products; filtered_products = filtered_products.filter( product => product.type === ownProps.match.params.type ) let activeBrandFilters = filtered_brandFilters.filter( item => item.inuse === true ); activeBrandFilters.forEach(filter => { if (filter.brand != "ALL") { filtered_products = filtered_products.filter( product => product.brand === filter.brand ) } }); let activePriceRangeFilters = filtered_priceRangeFilters.filter( item => item.inuse === true ); activePriceRangeFilters.forEach(filter => { if (filter.priceRange != "ALL") { filtered_products = filtered_products.filter( product => product.priceRange === filter.priceRange ); } }); let key = ownProps.match.params.type; return { overview: overview, brandFilters: filtered_brandFilters, priceRangeFilters: filtered_priceRangeFilters, products: filtered_products, key: key //a change of key property means the component remounts. this was needed so that when on a second page of products (state is activePage: 2) and switching to a 'page' with products type that does not have a second page (uses same components but displays different type of products), no products would be displayed because the component did not remount and thh state remained the same (activePage did not reset to 1) }; }; function mapDispatchToProps(dispatch){ return bindActionCreators({changeBrandFilter: changeBrandFilter, changePriceFilter: changePriceFilter}, dispatch); }; export const ProductsPageContainer = connect(mapStateToProps, mapDispatchToProps)(ProductsPage);