- 首页
- 前端开发
- 从 react-js-pagination 获取分页器以显示在页面上
从 react-js-pagination 获取分页器以显示在页面上
[英] Getting paginator from react-js-pagination to display on page
本文介绍了从 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>
<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()}
<分页activePage={this.state.activePage}itemsCountPerPage={12}totalItemsCount={this.props.products.length}pageRangeDisplayed={2}onChange={this.handlePageChange}/>
)}};函数 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.products;让概览 = state.overviews;让概览 = 概览.过滤器(概述 =>概览.type === ownProps.match.params.type)让filtered_products = 产品；过滤产品 = 过滤产品.过滤器(产品 =>product.type === ownProps.match.params.type//从路由参数中获取类型并找到类型匹配的产品)让 activeBrandFilters = 品牌过滤器.filter(项目 =>item.inuse === 真);activeBrandFilters.forEach(filter => {过滤产品 = 过滤产品.过滤器(产品 =>product.brand === filter.brand)});让 activePriceRangeFilters = priceRangeFilters.filter(项目 =>item.inuse === 真);activePriceRangeFilters.forEach(filter => {过滤产品 = 过滤产品.过滤器(产品 =>product.priceRange === filter.priceRange);});返回 {概述:概述，品牌过滤器:filtered_brandFilters，priceRangeFilters:filtered_priceRangeFilters，产品:filtered_products};};函数 matchDispatchToProps(dispatch){return bindActionCreators({changeBrandFilter: changeBrandFilter, changePriceFilter: changePriceFilter}, dispatch);};export const ProductsPageContainer = connect(mapStateToProps, matchDispatchToProps)(ProductsPage);
任何帮助将不胜感激.
谢谢.
解决方案
好吧，如果您阅读我对 Leonel 回答的评论，您会看到我确实设法从 react-js-paginator 获取分页器以显示但仍然无法显示让它工作.
我制作了自己的自定义基本分页器组件.
请在下面找到我制作的分页器组件:
从'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>)}}导出默认分页；
如您所见，这只是一个上一个按钮和一个下一个按钮.
然后，我在容器组件中确保只有需要激活的按钮显示为活动的，不需要激活的按钮显示为非活动的.这确保了在产品的第一页上 prev 不是可点击的选项，而在产品的最后一页上 next 不是可点击的选项.
我还确保为组件添加了一个key"属性，该属性对于显示组件的路径是唯一的.这是必需的，因为我的分页依赖于我在声明activePage"的组件中设置的状态，以便当我进入另一种类型的产品页面(例如，从套件产品到坦克产品)时，组件将重新安装(因为两个路由渲染相同的组件，渲染的产品由路由参数决定)并且状态将恢复到其初始状态 ({activePage: 1}).
请看下面的容器组件:
从'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);
I have a react app which is the front end for a shopping site.
I have a products page and I am trying to add pagination from react-js-pagination to the bottom of it so that I do not have to render the entire list of products at once.
I have followed the guidlines on implementing the pagination from https://www.npmjs.com/package/react-js-pagination but I still cannot get it to display (the rest of the page displays properly).
Can anybody see why?
Please see my code for the entire page below:
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);
Any help would be greatly appreciated.
Thanks.
解决方案
Ok so if you read my comments on Leonel's answer you will see that I did manage to get the paginator from react-js-paginator to display but could still not get it to work.
I made my own custom basic paginator component instead.
please find the paginator component that i made below:
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;
As you can see this is just a prev button and a next button.
I then, in the container component, made sure that only the button which was required to be active was shown as active and the button that was not required to be active was shown as inactive. this made sure that prev was not a clickable option when on the first page of products and next was not a clickable option when on the last page of products.
I also made sure to add a 'key' prop to the component that was unique to the route that the component was displayed on. This was needed because my pagination relies on a state that I have set in the component which declares the 'activePage' so that when I would go on to a page of products of another type (from kits products to tanks products for example), the component would remount (since both routes render the same component, with the products rendered being decided by the route parameters) and the state would revert to its initial state ({activePage: 1}).
Please see the container component below:
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);
这篇关于从 react-js-pagination 获取分页器以显示在页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
