我正在尝试在react-redux流程中应用分页,这里我面临两个问题。
第一次 - 给出错误 - Unknown prop
boundryLinks on <ul> tag
代码
<Pagination className="users-pagination pull-right" bsSize="medium" maxButtons={10} first last next prev boundryLinks items={pages} activePage={current_page} onSelect={this.changePage } />
第二 - 未在mapStatetoProps
函数中获取查询参数值 - page: Number(state.routing.locationBeforeTransitions.query.page_no) || 1,
这是我的文件组件代码&gt;&gt;&gt;&gt;
========================
import React from 'react';
import StaticLayout from '../Layout/StaticLayout';
import { Link } from 'react-router-dom';
import { getBlogList } from '../actions/signupActions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import dateFormat from 'dateformat';
import { Pagination } from 'react-bootstrap';
import { push } from 'react-router-redux';
class BlogList extends React.Component {
constructor(props){
super(props);
document.title = "Blogs";
this.changePage = this.changePage.bind(this);
}
componentDidMount() {
this.props.getBlogList();
}
//we cannot declare a string var in the Component class directly
render(){
//===pagination variable========
const per_page = 1;
let pages = 0;
if(this.props.blogListData !== undefined){
pages = Math.ceil(this.props.blogListData.count / per_page) ;
}
const current_page = this.props.page;
const start_offset = (current_page - 1) * per_page;
let start_count = 0;
//===End pagination variable========
return(
<StaticLayout>
<section id="page-title">
<div className="container clearfix">
<h1>Blog</h1>
<span>Our Latest News in Grid Layout</span>
<ol className="breadcrumb">
<li><Link to="/">Home</Link></li>
<li className="active">Blog</li>
</ol>
</div>
</section>
<section id="content">
<div className="content-wrap">
<div className="container clearfix">
<div id="posts" className="post-grid grid-container clearfix" data-layout="fitRows">
{this.props.blogListData && this.props.blogListData.blogs.map((obj, idx) => {
if(idx >= start_offset && start_count < per_page){
start_count++;
return <div className="entry clearfix" key={idx}>
<div className="entry-image">
<a href="/images/blog/full/17.jpg" data-lightbox="pic" ><img className="image_fade" src="/images/blog/grid/17.jpg" alt="Standard Post with Image" /></a>
</div>
<div className="entry-title">
<h2><a href="/">{obj.title}</a></h2>
</div>
<ul className="entry-meta clearfix">
<li><i className="icon-calendar3"></i> {dateFormat(obj.date_created, "mmm dS, yyyy")}</li>
</ul>
<div className="entry-content">
<p>{obj.content.length > 20 ? obj.content.substring(0,20)+'...' : obj.content}</p>
<a href="/"className="more-link">Read More</a>
</div>
</div>
}
}) }
<Pagination className="users-pagination pull-right" bsSize="medium" maxButtons={10} first last next prev boundryLinks items={pages} activePage={current_page} onSelect={this.changePage } />
</div>
</div>
</div>
</section>
</StaticLayout>
);
}
changePage(page){
this.props.dispatch(push('/?page_no='+page))
}
}
function mapStateToProps(state){
return {
blogListData: state.UserReducer.blogData,
page: Number(state.routing.locationBeforeTransitions.query.page_no) || 1,
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({getBlogList: getBlogList}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps) (BlogList);
请让我知道我做错了什么。