错误 - 反应分页标记中<ul>标记上的未知道具`boundryLinks`

时间:2017-06-21 06:43:40

标签: reactjs pagination

我正在尝试在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);

enter image description here

请让我知道我做错了什么。

0 个答案:

没有答案