blocks|key|439922|text|给您一个分页组件，对于新手来说，这个组件可能有点难理解。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|439923|https://www.npmjs.com/package/pagination|offset|length|439924|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>Give you a pagination component, which is maybe a little difficult to understand for newbie to <code>react</code>:</p>

<p><a href="https://www.npmjs.com/package/pagination" rel="nofollow">https://www.npmjs.com/package/pagination</a></p>


blocks|key|439978|text|最近，我在纯React中实现了分页。下面是一个工作演示：http://codepen.io/PiotrBerebecki/pen/pEYPbY|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|439979|当然，您必须调整逻辑和页面编号的显示方式，以使其满足您的要求。|439980|完整代码：|439981|class+TodoApp+extends+React.Component+{
++constructor()+{
++++super();
++++this.state+=+{
++++++todos:+['a','b','c','d','e','f','g','h','i','j','k'],
++++++currentPage:+1,
++++++todosPerPage:+3
++++};
++++this.handleClick+=+this.handleClick.bind(this);
++}

++handleClick(event)+{
++++this.setState({
++++++currentPage:+Number(event.target.id)
++++});
++}

++render()+{
++++const+{+todos,+currentPage,+todosPerPage+}+=+this.state;

++++//+Logic+for+displaying+todos
++++const+indexOfLastTodo+=+currentPage+*+todosPerPage;
++++const+indexOfFirstTodo+=+indexOfLastTodo+-+todosPerPage;
++++const+currentTodos+=+todos.slice(indexOfFirstTodo,+indexOfLastTodo);

++++const+renderTodos+=+currentTodos.map((todo,+index)+=>+{
++++++return+<li+key={index}>{todo}</li>;
++++});

++++//+Logic+for+displaying+page+numbers
++++const+pageNumbers+=+[];
++++for+(let+i+=+1;+i+<=+Math.ceil(todos.length+/+todosPerPage);+i%2B%2B)+{
++++++pageNumbers.push(i);
++++}

++++const+renderPageNumbers+=+pageNumbers.map(number+=>+{
++++++return+(
++++++++<li
++++++++++key={number}
++++++++++id={number}
++++++++++onClick={this.handleClick}
++++++++>
++++++++++{number}
++++++++</li>
++++++);
++++});

++++return+(
++++++<div>
++++++++<ul>
++++++++++{renderTodos}
++++++++</ul>
++++++++<ul+id="page-numbers">
++++++++++{renderPageNumbers}
++++++++</ul>
++++++</div>
++++);
++}
}


ReactDOM.render(
++<TodoApp+/>,
++document.getElementById('app')
);|code-block|syntax|javascript|439982|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/PiotrBerebecki/pen/pEYPbY^0|S|17|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>I've implemented pagination in pure React JS recently. Here is a working demo: <a href="http://codepen.io/PiotrBerebecki/pen/pEYPbY" rel="noreferrer">http://codepen.io/PiotrBerebecki/pen/pEYPbY</a></p>

<p>You would of course have to adjust the logic and the way page numbers are displayed so that it meets your requirements.</p>

<p>Full code:</p>

<pre><code>class TodoApp extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: ['a','b','c','d','e','f','g','h','i','j','k'],
      currentPage: 1,
      todosPerPage: 3
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.setState({
      currentPage: Number(event.target.id)
    });
  }

  render() {
    const { todos, currentPage, todosPerPage } = this.state;

    // Logic for displaying todos
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);

    const renderTodos = currentTodos.map((todo, index) =&gt; {
      return &lt;li key={index}&gt;{todo}&lt;/li&gt;;
    });

    // Logic for displaying page numbers
    const pageNumbers = [];
    for (let i = 1; i &lt;= Math.ceil(todos.length / todosPerPage); i++) {
      pageNumbers.push(i);
    }

    const renderPageNumbers = pageNumbers.map(number =&gt; {
      return (
        &lt;li
          key={number}
          id={number}
          onClick={this.handleClick}
        &gt;
          {number}
        &lt;/li&gt;
      );
    });

    return (
      &lt;div&gt;
        &lt;ul&gt;
          {renderTodos}
        &lt;/ul&gt;
        &lt;ul id="page-numbers"&gt;
          {renderPageNumbers}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
}


ReactDOM.render(
  &lt;TodoApp /&gt;,
  document.getElementById('app')
);
</code></pre>


blocks|key|440020|text|最近，我创建了这个分页组件，它实现了像Google搜索结果这样的分页逻辑：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|440021|import+React,+{+PropTypes+}+from+'react';
 
const+propTypes+=+{
    items:+PropTypes.array.isRequired,
    onChangePage:+PropTypes.func.isRequired,
    initialPage:+PropTypes.number   
}
 
const+defaultProps+=+{
    initialPage:+1
}
 
class+Pagination+extends+React.Component+{
    constructor(props)+{
        super(props);
        this.state+=+{+pager:+{}+};
    }
 
    componentWillMount()+{
        this.setPage(this.props.initialPage);
    }
 
    setPage(page)+{
        var+items+=+this.props.items;
        var+pager+=+this.state.pager;
 
        if+(page+<+1+%7C%7C+page+>+pager.totalPages)+{
            return;
        }
 
        //+get+new+pager+object+for+specified+page
        pager+=+this.getPager(items.length,+page);
 
        //+get+new+page+of+items+from+items+array
        var+pageOfItems+=+items.slice(pager.startIndex,+pager.endIndex+%2B+1);
 
        //+update+state
        this.setState({+pager:+pager+});
 
        //+call+change+page+function+in+parent+component
        this.props.onChangePage(pageOfItems);
    }
 
    getPager(totalItems,+currentPage,+pageSize)+{
        //+default+to+first+page
        currentPage+=+currentPage+%7C%7C+1;
 
        //+default+page+size+is+10
        pageSize+=+pageSize+%7C%7C+10;
 
        //+calculate+total+pages
        var+totalPages+=+Math.ceil(totalItems+/+pageSize);
 
        var+startPage,+endPage;
        if+(totalPages+<=+10)+{
            //+less+than+10+total+pages+so+show+all
            startPage+=+1;
            endPage+=+totalPages;
        }+else+{
            //+more+than+10+total+pages+so+calculate+start+and+end+pages
            if+(currentPage+<=+6)+{
                startPage+=+1;
                endPage+=+10;
            }+else+if+(currentPage+%2B+4+>=+totalPages)+{
                startPage+=+totalPages+-+9;
                endPage+=+totalPages;
            }+else+{
                startPage+=+currentPage+-+5;
                endPage+=+currentPage+%2B+4;
            }
        }
 
        //+calculate+start+and+end+item+indexes
        var+startIndex+=+(currentPage+-+1)+*+pageSize;
        var+endIndex+=+Math.min(startIndex+%2B+pageSize+-+1,+totalItems+-+1);
 
        //+create+an+array+of+pages+to+ng-repeat+in+the+pager+control
        var+pages+=+_.range(startPage,+endPage+%2B+1);
 
        //+return+object+with+all+pager+properties+required+by+the+view
        return+{
            totalItems:+totalItems,
            currentPage:+currentPage,
            pageSize:+pageSize,
            totalPages:+totalPages,
            startPage:+startPage,
            endPage:+endPage,
            startIndex:+startIndex,
            endIndex:+endIndex,
            pages:+pages
        };
    }
 
    render()+{
        var+pager+=+this.state.pager;
 
        return+(
            <ul+className="pagination">
                <li+className={pager.currentPage+===+1+?+'disabled'+:+''}>
                    <a+onClick={()+=>+this.setPage(1)}>First</a>
                </li>
                <li+className={pager.currentPage+===+1+?+'disabled'+:+''}>
                    <a+onClick={()+=>+this.setPage(pager.currentPage+-+1)}>Previous</a>
                </li>
                {pager.pages.map((page,+index)+=>
                    <li+key={index}+className={pager.currentPage+===+page+?+'active'+:+''}>
                        <a+onClick={()+=>+this.setPage(page)}>{page}</a>
                    </li>
                )}
                <li+className={pager.currentPage+===+pager.totalPages+?+'disabled'+:+''}>
                    <a+onClick={()+=>+this.setPage(pager.currentPage+%2B+1)}>Next</a>
                </li>
                <li+className={pager.currentPage+===+pager.totalPages+?+'disabled'+:+''}>
                    <a+onClick={()+=>+this.setPage(pager.totalPages)}>Last</a>
                </li>
            </ul>
        );
    }
}
 
Pagination.propTypes+=+propTypes;
Pagination.defaultProps
export+default+Pagination;|code-block|syntax|javascript|440022|下面是一个示例App组件，它使用分页组件对包含150个示例项的列表进行分页：|440023|import+React+from+'react';
import+Pagination+from+'./Pagination';
 
class+App+extends+React.Component+{
    constructor()+{
        super();
 
        //+an+example+array+of+items+to+be+paged
        var+exampleItems+=+_.range(1,+151).map(i+=>+{+return+{+id:+i,+name:+'Item+'+%2B+i+};+});
 
        this.state+=+{
            exampleItems:+exampleItems,
            pageOfItems:+[]
        };
 
        //+bind+function+in+constructor+instead+of+render+(https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
        this.onChangePage+=+this.onChangePage.bind(this);
    }
 
    onChangePage(pageOfItems)+{
        //+update+state+with+new+page+of+items
        this.setState({+pageOfItems:+pageOfItems+});
    }
 
    render()+{
        return+(
            <div>
                <div+className="container">
                    <div+className="text-center">
                        <h1>React+-+Pagination+Example+with+logic+like+Google</h1>
                        {this.state.pageOfItems.map(item+=>
                            <div+key={item.id}>{item.name}</div>
                        )}
                        <Pagination+items={this.state.exampleItems}+onChangePage={this.onChangePage}+/>
                    </div>
                </div>
                <hr+/>
                <div+className="credits+text-center">
                    <p>
                        <a+href="http://jasonwatmore.com"+target="_top">JasonWatmore.com</a>
                    </p>
                </div>
            </div>
        );
    }
}
 
export+default+App;|440024|有关更多详细信息和现场演示，您可以查看这个职位。|offset|length|440025|entityMap|0|LINK|mutability|MUTABLE|url|http://jasonwatmore.com/post/2017/03/14/react-pagination-example-with-logic-like-google^0|0|0|0|0|J|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>I recently created this Pagination component that implements paging logic like Google's search results:</p>

<pre><code>import React, { PropTypes } from 'react';
 
const propTypes = {
    items: PropTypes.array.isRequired,
    onChangePage: PropTypes.func.isRequired,
    initialPage: PropTypes.number   
}
 
const defaultProps = {
    initialPage: 1
}
 
class Pagination extends React.Component {
    constructor(props) {
        super(props);
        this.state = { pager: {} };
    }
 
    componentWillMount() {
        this.setPage(this.props.initialPage);
    }
 
    setPage(page) {
        var items = this.props.items;
        var pager = this.state.pager;
 
        if (page &lt; 1 || page &gt; pager.totalPages) {
            return;
        }
 
        // get new pager object for specified page
        pager = this.getPager(items.length, page);
 
        // get new page of items from items array
        var pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);
 
        // update state
        this.setState({ pager: pager });
 
        // call change page function in parent component
        this.props.onChangePage(pageOfItems);
    }
 
    getPager(totalItems, currentPage, pageSize) {
        // default to first page
        currentPage = currentPage || 1;
 
        // default page size is 10
        pageSize = pageSize || 10;
 
        // calculate total pages
        var totalPages = Math.ceil(totalItems / pageSize);
 
        var startPage, endPage;
        if (totalPages &lt;= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage &lt;= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 &gt;= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }
 
        // calculate start and end item indexes
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
 
        // create an array of pages to ng-repeat in the pager control
        var pages = _.range(startPage, endPage + 1);
 
        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
 
    render() {
        var pager = this.state.pager;
 
        return (
            &lt;ul className="pagination"&gt;
                &lt;li className={pager.currentPage === 1 ? 'disabled' : ''}&gt;
                    &lt;a onClick={() =&gt; this.setPage(1)}&gt;First&lt;/a&gt;
                &lt;/li&gt;
                &lt;li className={pager.currentPage === 1 ? 'disabled' : ''}&gt;
                    &lt;a onClick={() =&gt; this.setPage(pager.currentPage - 1)}&gt;Previous&lt;/a&gt;
                &lt;/li&gt;
                {pager.pages.map((page, index) =&gt;
                    &lt;li key={index} className={pager.currentPage === page ? 'active' : ''}&gt;
                        &lt;a onClick={() =&gt; this.setPage(page)}&gt;{page}&lt;/a&gt;
                    &lt;/li&gt;
                )}
                &lt;li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}&gt;
                    &lt;a onClick={() =&gt; this.setPage(pager.currentPage + 1)}&gt;Next&lt;/a&gt;
                &lt;/li&gt;
                &lt;li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}&gt;
                    &lt;a onClick={() =&gt; this.setPage(pager.totalPages)}&gt;Last&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        );
    }
}
 
Pagination.propTypes = propTypes;
Pagination.defaultProps
export default Pagination;
</code></pre>

<p>And here's an example App component that uses the Pagination component to paginate a list of 150 example items:</p>

<pre><code>import React from 'react';
import Pagination from './Pagination';
 
class App extends React.Component {
    constructor() {
        super();
 
        // an example array of items to be paged
        var exampleItems = _.range(1, 151).map(i =&gt; { return { id: i, name: 'Item ' + i }; });
 
        this.state = {
            exampleItems: exampleItems,
            pageOfItems: []
        };
 
        // bind function in constructor instead of render (https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
        this.onChangePage = this.onChangePage.bind(this);
    }
 
    onChangePage(pageOfItems) {
        // update state with new page of items
        this.setState({ pageOfItems: pageOfItems });
    }
 
    render() {
        return (
            &lt;div&gt;
                &lt;div className="container"&gt;
                    &lt;div className="text-center"&gt;
                        &lt;h1&gt;React - Pagination Example with logic like Google&lt;/h1&gt;
                        {this.state.pageOfItems.map(item =&gt;
                            &lt;div key={item.id}&gt;{item.name}&lt;/div&gt;
                        )}
                        &lt;Pagination items={this.state.exampleItems} onChangePage={this.onChangePage} /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;hr /&gt;
                &lt;div className="credits text-center"&gt;
                    &lt;p&gt;
                        &lt;a href="http://jasonwatmore.com" target="_top"&gt;JasonWatmore.com&lt;/a&gt;
                    &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }
}
 
export default App;
</code></pre>

<p>For more details and a live demo you can check out <a href="http://jasonwatmore.com/post/2017/03/14/react-pagination-example-with-logic-like-google" rel="nofollow noreferrer">this post</a></p>


blocks|key|2361491|text|+++Sample+pagination+react+js+working+code+
++++import+React,+{+Component+}+from+'react';
++++import+{
++++Pagination,
++++PaginationItem,
++++PaginationLink
++++}+from+"reactstrap";


++++let+prev++=+0;
++++let+next++=+0;
++++let+last++=+0;
++++let+first+=+0;
++++export+default+class+SamplePagination+extends+Component+{
+++++++constructor()+{
+++++++++super();
+++++++++this.state+=+{
+++++++++++todos:+['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','T','v','u','w','x','y','z'],
+++++++++++currentPage:+1,
+++++++++++todosPerPage:+3,

+++++++++};
+++++++++this.handleClick+=+this.handleClick.bind(this);
+++++++++this.handleLastClick+=+this.handleLastClick.bind(this);
+++++++++this.handleFirstClick+=+this.handleFirstClick.bind(this);
+++++++}

+++++++handleClick(event)+{
+++++++++event.preventDefault();
+++++++++this.setState({
+++++++++++currentPage:+Number(event.target.id)
+++++++++});
+++++++}

+++++++handleLastClick(event)+{
+++++++++event.preventDefault();
+++++++++this.setState({
+++++++++++currentPage:last
+++++++++});
+++++++}
+++++++handleFirstClick(event)+{
+++++++++event.preventDefault();
+++++++++this.setState({
+++++++++++currentPage:1
+++++++++});
+++++++}
+++++++render()+{
+++++++++let+{+todos,+currentPage,+todosPerPage+}+=+this.state;

+++++++++//+Logic+for+displaying+current+todos
+++++++++let+indexOfLastTodo+=+currentPage+*+todosPerPage;
+++++++++let+indexOfFirstTodo+=+indexOfLastTodo+-+todosPerPage;
+++++++++let+currentTodos+=+todos.slice(indexOfFirstTodo,+indexOfLastTodo);
++++++++++prev++=+currentPage+>+0+?+(currentPage+-1)+:0;
++++++++++last+=+Math.ceil(todos.length/todosPerPage);
++++++++++next++=+(last+===+currentPage)+?currentPage:+currentPage+%2B1;

+++++++++//+Logic+for+displaying+page+numbers
+++++++++let+pageNumbers+=+[];
+++++++++for+(let+i+=+1;+i+<=last;+i%2B%2B)+{
+++++++++++pageNumbers.push(i);
+++++++++}

++++++++++return+(
+++++++++++<div>
+++++++++++++<ul>
++++++++++++++{
++++++++++++++++currentTodos.map((todo,index)+=>{
++++++++++++++++++return+<li+key={index}>{todo}</li>;
++++++++++++++++})
++++++++++++++}
+++++++++++++</ul><ul+id="page-numbers">
+++++++++++++<nav>
++++++++++++++<Pagination>
++++++++++++++<PaginationItem>
++++++++++++++{+prev+===+0+?+<PaginationLink+disabled>First</PaginationLink>+:
++++++++++++++++++<PaginationLink+onClick={this.handleFirstClick}+id={prev}+href={prev}>First</PaginationLink>
++++++++++++++}
++++++++++++++</PaginationItem>
++++++++++++++<PaginationItem>
++++++++++++++{+prev+===+0+?+<PaginationLink+disabled>Prev</PaginationLink>+:
++++++++++++++++++<PaginationLink+onClick={this.handleClick}+id={prev}+href={prev}>Prev</PaginationLink>
++++++++++++++}
++++++++++++++</PaginationItem>
+++++++++++++++++{
++++++++++++++++++pageNumbers.map((number,i)+=>
++++++++++++++++++<Pagination+key=+{i}>
++++++++++++++++++<PaginationItem+active+=+{pageNumbers[currentPage-1]+===+(number)+?+true+:+false}+>
+++++++++++++++++++<PaginationLink+onClick={this.handleClick}+href={number}+key={number}+id={number}>
+++++++++++++++++++{number}
+++++++++++++++++++</PaginationLink>
+++++++++++++++++++</PaginationItem>
++++++++++++++++++</Pagination>
++++++++++++++++)}

+++++++++++++<PaginationItem>
+++++++++++++{
+++++++++++++++currentPage+===+last+?+<PaginationLink+disabled>Next</PaginationLink>+:
+++++++++++++++<PaginationLink+onClick={this.handleClick}+id={pageNumbers[currentPage]}+href={pageNumbers[currentPage]}>Next</PaginationLink>
+++++++++++++}
+++++++++++++</PaginationItem>

+++++++++++++<PaginationItem>
+++++++++++++{
+++++++++++++++currentPage+===+last+?+<PaginationLink+disabled>Last</PaginationLink>+:
+++++++++++++++<PaginationLink+onClick={this.handleLastClick}+id={pageNumbers[currentPage]}+href={pageNumbers[currentPage]}>Last</PaginationLink>
+++++++++++++}
+++++++++++++</PaginationItem>
+++++++++++++</Pagination>
++++++++++++++</nav>
+++++++++++++</ul>
+++++++++++</div>
+++++++++);
+++++++}
+++++}

+++++ReactDOM.render(
++++++<SamplePagination+/>,
++++++document.getElementById('root')
++++);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2361492|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>   Sample pagination react js working code 
    import React, { Component } from 'react';
    import {
    Pagination,
    PaginationItem,
    PaginationLink
    } from "reactstrap";


    let prev  = 0;
    let next  = 0;
    let last  = 0;
    let first = 0;
    export default class SamplePagination extends Component {
       constructor() {
         super();
         this.state = {
           todos: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','T','v','u','w','x','y','z'],
           currentPage: 1,
           todosPerPage: 3,

         };
         this.handleClick = this.handleClick.bind(this);
         this.handleLastClick = this.handleLastClick.bind(this);
         this.handleFirstClick = this.handleFirstClick.bind(this);
       }

       handleClick(event) {
         event.preventDefault();
         this.setState({
           currentPage: Number(event.target.id)
         });
       }

       handleLastClick(event) {
         event.preventDefault();
         this.setState({
           currentPage:last
         });
       }
       handleFirstClick(event) {
         event.preventDefault();
         this.setState({
           currentPage:1
         });
       }
       render() {
         let { todos, currentPage, todosPerPage } = this.state;

         // Logic for displaying current todos
         let indexOfLastTodo = currentPage * todosPerPage;
         let indexOfFirstTodo = indexOfLastTodo - todosPerPage;
         let currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);
          prev  = currentPage &gt; 0 ? (currentPage -1) :0;
          last = Math.ceil(todos.length/todosPerPage);
          next  = (last === currentPage) ?currentPage: currentPage +1;

         // Logic for displaying page numbers
         let pageNumbers = [];
         for (let i = 1; i &lt;=last; i++) {
           pageNumbers.push(i);
         }

          return (
           &lt;div&gt;
             &lt;ul&gt;
              {
                currentTodos.map((todo,index) =&gt;{
                  return &lt;li key={index}&gt;{todo}&lt;/li&gt;;
                })
              }
             &lt;/ul&gt;&lt;ul id="page-numbers"&gt;
             &lt;nav&gt;
              &lt;Pagination&gt;
              &lt;PaginationItem&gt;
              { prev === 0 ? &lt;PaginationLink disabled&gt;First&lt;/PaginationLink&gt; :
                  &lt;PaginationLink onClick={this.handleFirstClick} id={prev} href={prev}&gt;First&lt;/PaginationLink&gt;
              }
              &lt;/PaginationItem&gt;
              &lt;PaginationItem&gt;
              { prev === 0 ? &lt;PaginationLink disabled&gt;Prev&lt;/PaginationLink&gt; :
                  &lt;PaginationLink onClick={this.handleClick} id={prev} href={prev}&gt;Prev&lt;/PaginationLink&gt;
              }
              &lt;/PaginationItem&gt;
                 {
                  pageNumbers.map((number,i) =&gt;
                  &lt;Pagination key= {i}&gt;
                  &lt;PaginationItem active = {pageNumbers[currentPage-1] === (number) ? true : false} &gt;
                   &lt;PaginationLink onClick={this.handleClick} href={number} key={number} id={number}&gt;
                   {number}
                   &lt;/PaginationLink&gt;
                   &lt;/PaginationItem&gt;
                  &lt;/Pagination&gt;
                )}

             &lt;PaginationItem&gt;
             {
               currentPage === last ? &lt;PaginationLink disabled&gt;Next&lt;/PaginationLink&gt; :
               &lt;PaginationLink onClick={this.handleClick} id={pageNumbers[currentPage]} href={pageNumbers[currentPage]}&gt;Next&lt;/PaginationLink&gt;
             }
             &lt;/PaginationItem&gt;

             &lt;PaginationItem&gt;
             {
               currentPage === last ? &lt;PaginationLink disabled&gt;Last&lt;/PaginationLink&gt; :
               &lt;PaginationLink onClick={this.handleLastClick} id={pageNumbers[currentPage]} href={pageNumbers[currentPage]}&gt;Last&lt;/PaginationLink&gt;
             }
             &lt;/PaginationItem&gt;
             &lt;/Pagination&gt;
              &lt;/nav&gt;
             &lt;/ul&gt;
           &lt;/div&gt;
         );
       }
     }

     ReactDOM.render(
      &lt;SamplePagination /&gt;,
      document.getElementById('root')
    );
</code></pre>


blocks|key|440052|text|我最近创建了一个库，它可以帮助处理分页情况，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|440053|在Redux中存储规范化数据|unordered-list-item|440054|基于搜索筛选器的缓存页|440055|简化的react虚拟化列表使用|440056|背景中的刷新结果|440057|存储上次访问的页面和使用的筛选器|440058|演示页面实现了上述所有功能。|offset|length|440059|你可以在Github上找到源代码|440060|entityMap|0|LINK|mutability|MUTABLE|url|https://tranzystor.github.io/redux-cached-pagination/#/|1|https://github.com/Tranzystor/redux-cached-pagination^0|0|0|0|0|0|0|0|2|0|0|4|6|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|14|8|@]|9|@]|A|$]]|$1|G|3|H|5|D|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|16|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@$O|19|P|1A|1|1B]]|A|$]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@$O|1D|P|1E|1|1F]]|A|$]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

<p>I've recently created library which helps to cope with pagination cases like:</p>

<ul>
<li>storing normalized data in Redux</li>
<li>caching pages based on search filters</li>
<li>simplified react-virtualized list usage</li>
<li>refreshing results in background</li>
<li>storing last visited page and used filters </li>
</ul>

<p><a href="https://tranzystor.github.io/redux-cached-pagination/#/" rel="nofollow noreferrer">DEMO</a> page implements all above features.</p>

<p>Source code you can find on <a href="https://github.com/Tranzystor/redux-cached-pagination" rel="nofollow noreferrer">Github</a></p>


blocks|key|2361534|text|我尝试重新创建皮奥特-贝贝基给出的简单分页示例，这是非常棒的。但是当有很多页面时，页面就会在屏幕上溢出。因此，我使用了“前一步”和“后退”按钮以及“向前”和“向后”按钮在页面之间来回流动。对于设计部分，我使用了引导3。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2361535|可以使用页面绑定值自定义要在分页中显示的任何页。确保对upperPageBound和pageBound使用相同的值。|2361536|++++class+TodoApp+extends+React.Component+{
++++++++++constructor()+{
++++++++++++super();
++++++++++++this.state+=+{
++++++++++++++todos:+['a','b','c','d','e','f','g','h','i','j','k','l','m',
'n','o','p','q','r','s','t','u','v','w','x','y','z'],
++++++++++++++currentPage:+1,
++++++++++++++todosPerPage:+3,
++++++++++++++upperPageBound:+3,
++++++++++++++lowerPageBound:+0,
++++++++++++++isPrevBtnActive:+'disabled',
++++++++++++++isNextBtnActive:+'',
++++++++++++++pageBound:+3
++++++++++++};
++++++++++++this.handleClick+=+this.handleClick.bind(this);
++++++++++++this.btnDecrementClick+=+this.btnDecrementClick.bind(this);
++++++++++++this.btnIncrementClick+=+this.btnIncrementClick.bind(this);
++++++++++++this.btnNextClick+=+this.btnNextClick.bind(this);
++++++++++++this.btnPrevClick+=+this.btnPrevClick.bind(this);
++++++++++++//+this.componentDidMount+=+this.componentDidMount.bind(this);
++++++++++++this.setPrevAndNextBtnClass+=+this.setPrevAndNextBtnClass.bind(this);
++++++++++}
++++++++++componentDidUpdate()+{
++++++++++++++++$("ul+li.active").removeClass('active');
++++++++++++++++$('ul+li#'%2Bthis.state.currentPage).addClass('active');
++++++++++}
++++++++++handleClick(event)+{
++++++++++++let+listid+=+Number(event.target.id);
++++++++++++this.setState({
++++++++++++++currentPage:+listid
++++++++++++});
++++++++++++$("ul+li.active").removeClass('active');
++++++++++++$('ul+li#'%2Blistid).addClass('active');
++++++++++++this.setPrevAndNextBtnClass(listid);
++++++++++}
++++++++++setPrevAndNextBtnClass(listid)+{
++++++++++++let+totalPage+=+Math.ceil(this.state.todos.length+/+this.state.todosPerPage);
++++++++++++this.setState({isNextBtnActive:+'disabled'});
++++++++++++this.setState({isPrevBtnActive:+'disabled'});
++++++++++++if(totalPage+===+listid+&&+totalPage+>+1){
++++++++++++++++this.setState({isPrevBtnActive:+''});
++++++++++++}
++++++++++++else+if(listid+===+1+&&+totalPage+>+1){
++++++++++++++++this.setState({isNextBtnActive:+''});
++++++++++++}
++++++++++++else+if(totalPage+>+1){
++++++++++++++++this.setState({isNextBtnActive:+''});
++++++++++++++++this.setState({isPrevBtnActive:+''});
++++++++++++}
++++++++}
++++++++++btnIncrementClick()+{
++++++++++++++this.setState({upperPageBound:+this.state.upperPageBound+%2B+this.state.pageBound});
++++++++++++++this.setState({lowerPageBound:+this.state.lowerPageBound+%2B+this.state.pageBound});
++++++++++++++let+listid+=+this.state.upperPageBound+%2B+1;
++++++++++++++this.setState({+currentPage:+listid});
++++++++++++++this.setPrevAndNextBtnClass(listid);
++++++++}
++++++++++btnDecrementClick()+{
++++++++++++this.setState({upperPageBound:+this.state.upperPageBound+-+this.state.pageBound});
++++++++++++this.setState({lowerPageBound:+this.state.lowerPageBound+-+this.state.pageBound});
++++++++++++let+listid+=+this.state.upperPageBound+-+this.state.pageBound;
++++++++++++this.setState({+currentPage:+listid});
++++++++++++this.setPrevAndNextBtnClass(listid);
++++++++}
++++++++btnPrevClick()+{
++++++++++++if((this.state.currentPage+-1)%25this.state.pageBound+===+0+){
++++++++++++++++this.setState({upperPageBound:+this.state.upperPageBound+-+this.state.pageBound});
++++++++++++++++this.setState({lowerPageBound:+this.state.lowerPageBound+-+this.state.pageBound});
++++++++++++}
++++++++++++let+listid+=+this.state.currentPage+-+1;
++++++++++++this.setState({+currentPage+:+listid});
++++++++++++this.setPrevAndNextBtnClass(listid);
++++++++}
++++++++btnNextClick()+{
++++++++++++if((this.state.currentPage+%2B1)+>+this.state.upperPageBound+){
++++++++++++++++this.setState({upperPageBound:+this.state.upperPageBound+%2B+this.state.pageBound});
++++++++++++++++this.setState({lowerPageBound:+this.state.lowerPageBound+%2B+this.state.pageBound});
++++++++++++}
++++++++++++let+listid+=+this.state.currentPage+%2B+1;
++++++++++++this.setState({+currentPage+:+listid});
++++++++++++this.setPrevAndNextBtnClass(listid);
++++++++}
++++++++++render()+{
++++++++++++const+{+todos,+currentPage,+todosPerPage,upperPageBound,lowerPageBound,isPrevBtnActive,isNextBtnActive+}+=+this.state;
++++++++++++//+Logic+for+displaying+current+todos
++++++++++++const+indexOfLastTodo+=+currentPage+*+todosPerPage;
++++++++++++const+indexOfFirstTodo+=+indexOfLastTodo+-+todosPerPage;
++++++++++++const+currentTodos+=+todos.slice(indexOfFirstTodo,+indexOfLastTodo);

++++++++++++const+renderTodos+=+currentTodos.map((todo,+index)+=>+{
++++++++++++++return+<li+key={index}>{todo}</li>;
++++++++++++});

++++++++++++//+Logic+for+displaying+page+numbers
++++++++++++const+pageNumbers+=+[];
++++++++++++for+(let+i+=+1;+i+<=+Math.ceil(todos.length+/+todosPerPage);+i%2B%2B)+{
++++++++++++++pageNumbers.push(i);
++++++++++++}

++++++++++++const+renderPageNumbers+=+pageNumbers.map(number+=>+{
++++++++++++++++if(number+===+1+&&+currentPage+===+1){
++++++++++++++++++++return(
++++++++++++++++++++++++<li+key={number}+className='active'+id={number}><a+href='#'+id={number}+onClick={this.handleClick}>{number}</a></li>
++++++++++++++++++++)
++++++++++++++++}
++++++++++++++++else+if((number+<+upperPageBound+%2B+1)+&&+number+>+lowerPageBound){
++++++++++++++++++++return(
++++++++++++++++++++++++<li+key={number}+id={number}><a+href='#'+id={number}+onClick={this.handleClick}>{number}</a></li>
++++++++++++++++++++)
++++++++++++++++}
++++++++++++});
++++++++++++let+pageIncrementBtn+=+null;
++++++++++++if(pageNumbers.length+>+upperPageBound){
++++++++++++++++pageIncrementBtn+=+<li+className=''><a+href='#'+onClick={this.btnIncrementClick}>+&hellip;+</a></li>
++++++++++++}
++++++++++++let+pageDecrementBtn+=+null;
++++++++++++if(lowerPageBound+>=+1){
++++++++++++++++pageDecrementBtn+=+<li+className=''><a+href='#'+onClick={this.btnDecrementClick}>+&hellip;+</a></li>
++++++++++++}
++++++++++++let+renderPrevBtn+=+null;
++++++++++++if(isPrevBtnActive+===+'disabled')+{
++++++++++++++++renderPrevBtn+=+<li+className={isPrevBtnActive}><span+id="btnPrev">+Prev+</span></li>
++++++++++++}
++++++++++++else{
++++++++++++++++renderPrevBtn+=+<li+className={isPrevBtnActive}><a+href='#'+id="btnPrev"+onClick={this.btnPrevClick}>+Prev+</a></li>
++++++++++++}
++++++++++++let+renderNextBtn+=+null;
++++++++++++if(isNextBtnActive+===+'disabled')+{
++++++++++++++++renderNextBtn+=+<li+className={isNextBtnActive}><span+id="btnNext">+Next+</span></li>
++++++++++++}
++++++++++++else{
++++++++++++++++renderNextBtn+=+<li+className={isNextBtnActive}><a+href='#'+id="btnNext"+onClick={this.btnNextClick}>+Next+</a></li>
++++++++++++}
++++++++++++return+(
++++++++++++++<div>
++++++++++++++++++<ul>
++++++++++++++++++{renderTodos}
++++++++++++++++</ul>
++++++++++++++++<ul+id="page-numbers"+className="pagination">
++++++++++++++++++{renderPrevBtn}
++++++++++++++++++{pageDecrementBtn}
++++++++++++++++++{renderPageNumbers}
++++++++++++++++++{pageIncrementBtn}
++++++++++++++++++{renderNextBtn}
++++++++++++++++</ul>
++++++++++++++</div>
++++++++++++);
++++++++++}
++++++++}


++++++++ReactDOM.render(
++++++++++<TodoApp+/>,
++++++++++document.getElementById('app')
++++++++);|code-block|syntax|javascript|2361537|工作演示链接：https://codepen.io/mhmanandhar/pen/oEWBqx|2361538|图片：简单反应分页|2361539|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/4186037/piotr-berebecki|1|https://codepen.io/mhmanandhar/pen/oEWBqx|2|https://i.stack.imgur.com/57vXp.png^0|7|7|0|0|0|0|7|15|1|0|3|6|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|O|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]|Y|$5|R|S|T|C|$U|Z]]]]

<p>I have tried to recreate the simple pagination example given by <a href="https://stackoverflow.com/users/4186037/piotr-berebecki">piotr-berebecki</a> which was great. But when there will be a lot of pages then the pagination will overflow in the screen. So, I used previous and back button along with forward and backward button to stream back and forth between the pages. And for design part I have used bootstrap 3. </p>

<p>You can customize no of pages to display in pagination using the pagebound values. Make sure to use same value for upperPageBound and pageBound.</p>

<pre><code>    class TodoApp extends React.Component {
          constructor() {
            super();
            this.state = {
              todos: ['a','b','c','d','e','f','g','h','i','j','k','l','m',
'n','o','p','q','r','s','t','u','v','w','x','y','z'],
              currentPage: 1,
              todosPerPage: 3,
              upperPageBound: 3,
              lowerPageBound: 0,
              isPrevBtnActive: 'disabled',
              isNextBtnActive: '',
              pageBound: 3
            };
            this.handleClick = this.handleClick.bind(this);
            this.btnDecrementClick = this.btnDecrementClick.bind(this);
            this.btnIncrementClick = this.btnIncrementClick.bind(this);
            this.btnNextClick = this.btnNextClick.bind(this);
            this.btnPrevClick = this.btnPrevClick.bind(this);
            // this.componentDidMount = this.componentDidMount.bind(this);
            this.setPrevAndNextBtnClass = this.setPrevAndNextBtnClass.bind(this);
          }
          componentDidUpdate() {
                $("ul li.active").removeClass('active');
                $('ul li#'+this.state.currentPage).addClass('active');
          }
          handleClick(event) {
            let listid = Number(event.target.id);
            this.setState({
              currentPage: listid
            });
            $("ul li.active").removeClass('active');
            $('ul li#'+listid).addClass('active');
            this.setPrevAndNextBtnClass(listid);
          }
          setPrevAndNextBtnClass(listid) {
            let totalPage = Math.ceil(this.state.todos.length / this.state.todosPerPage);
            this.setState({isNextBtnActive: 'disabled'});
            this.setState({isPrevBtnActive: 'disabled'});
            if(totalPage === listid &amp;&amp; totalPage &gt; 1){
                this.setState({isPrevBtnActive: ''});
            }
            else if(listid === 1 &amp;&amp; totalPage &gt; 1){
                this.setState({isNextBtnActive: ''});
            }
            else if(totalPage &gt; 1){
                this.setState({isNextBtnActive: ''});
                this.setState({isPrevBtnActive: ''});
            }
        }
          btnIncrementClick() {
              this.setState({upperPageBound: this.state.upperPageBound + this.state.pageBound});
              this.setState({lowerPageBound: this.state.lowerPageBound + this.state.pageBound});
              let listid = this.state.upperPageBound + 1;
              this.setState({ currentPage: listid});
              this.setPrevAndNextBtnClass(listid);
        }
          btnDecrementClick() {
            this.setState({upperPageBound: this.state.upperPageBound - this.state.pageBound});
            this.setState({lowerPageBound: this.state.lowerPageBound - this.state.pageBound});
            let listid = this.state.upperPageBound - this.state.pageBound;
            this.setState({ currentPage: listid});
            this.setPrevAndNextBtnClass(listid);
        }
        btnPrevClick() {
            if((this.state.currentPage -1)%this.state.pageBound === 0 ){
                this.setState({upperPageBound: this.state.upperPageBound - this.state.pageBound});
                this.setState({lowerPageBound: this.state.lowerPageBound - this.state.pageBound});
            }
            let listid = this.state.currentPage - 1;
            this.setState({ currentPage : listid});
            this.setPrevAndNextBtnClass(listid);
        }
        btnNextClick() {
            if((this.state.currentPage +1) &gt; this.state.upperPageBound ){
                this.setState({upperPageBound: this.state.upperPageBound + this.state.pageBound});
                this.setState({lowerPageBound: this.state.lowerPageBound + this.state.pageBound});
            }
            let listid = this.state.currentPage + 1;
            this.setState({ currentPage : listid});
            this.setPrevAndNextBtnClass(listid);
        }
          render() {
            const { todos, currentPage, todosPerPage,upperPageBound,lowerPageBound,isPrevBtnActive,isNextBtnActive } = this.state;
            // Logic for displaying current todos
            const indexOfLastTodo = currentPage * todosPerPage;
            const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
            const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);

            const renderTodos = currentTodos.map((todo, index) =&gt; {
              return &lt;li key={index}&gt;{todo}&lt;/li&gt;;
            });

            // Logic for displaying page numbers
            const pageNumbers = [];
            for (let i = 1; i &lt;= Math.ceil(todos.length / todosPerPage); i++) {
              pageNumbers.push(i);
            }

            const renderPageNumbers = pageNumbers.map(number =&gt; {
                if(number === 1 &amp;&amp; currentPage === 1){
                    return(
                        &lt;li key={number} className='active' id={number}&gt;&lt;a href='#' id={number} onClick={this.handleClick}&gt;{number}&lt;/a&gt;&lt;/li&gt;
                    )
                }
                else if((number &lt; upperPageBound + 1) &amp;&amp; number &gt; lowerPageBound){
                    return(
                        &lt;li key={number} id={number}&gt;&lt;a href='#' id={number} onClick={this.handleClick}&gt;{number}&lt;/a&gt;&lt;/li&gt;
                    )
                }
            });
            let pageIncrementBtn = null;
            if(pageNumbers.length &gt; upperPageBound){
                pageIncrementBtn = &lt;li className=''&gt;&lt;a href='#' onClick={this.btnIncrementClick}&gt; &amp;hellip; &lt;/a&gt;&lt;/li&gt;
            }
            let pageDecrementBtn = null;
            if(lowerPageBound &gt;= 1){
                pageDecrementBtn = &lt;li className=''&gt;&lt;a href='#' onClick={this.btnDecrementClick}&gt; &amp;hellip; &lt;/a&gt;&lt;/li&gt;
            }
            let renderPrevBtn = null;
            if(isPrevBtnActive === 'disabled') {
                renderPrevBtn = &lt;li className={isPrevBtnActive}&gt;&lt;span id="btnPrev"&gt; Prev &lt;/span&gt;&lt;/li&gt;
            }
            else{
                renderPrevBtn = &lt;li className={isPrevBtnActive}&gt;&lt;a href='#' id="btnPrev" onClick={this.btnPrevClick}&gt; Prev &lt;/a&gt;&lt;/li&gt;
            }
            let renderNextBtn = null;
            if(isNextBtnActive === 'disabled') {
                renderNextBtn = &lt;li className={isNextBtnActive}&gt;&lt;span id="btnNext"&gt; Next &lt;/span&gt;&lt;/li&gt;
            }
            else{
                renderNextBtn = &lt;li className={isNextBtnActive}&gt;&lt;a href='#' id="btnNext" onClick={this.btnNextClick}&gt; Next &lt;/a&gt;&lt;/li&gt;
            }
            return (
              &lt;div&gt;
                  &lt;ul&gt;
                  {renderTodos}
                &lt;/ul&gt;
                &lt;ul id="page-numbers" className="pagination"&gt;
                  {renderPrevBtn}
                  {pageDecrementBtn}
                  {renderPageNumbers}
                  {pageIncrementBtn}
                  {renderNextBtn}
                &lt;/ul&gt;
              &lt;/div&gt;
            );
          }
        }


        ReactDOM.render(
          &lt;TodoApp /&gt;,
          document.getElementById('app')
        );
</code></pre>

<p>Working demo link : <a href="https://codepen.io/mhmanandhar/pen/oEWBqx" rel="noreferrer">https://codepen.io/mhmanandhar/pen/oEWBqx</a></p>

<p>Image : <a href="https://i.stack.imgur.com/57vXp.png" rel="noreferrer">simple react pagination</a></p>


blocks|key|2361561|text|这里有一种方法可以从react引导库创建自定义分页组件，并且这个组件可以在整个项目中使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2361562|📷|atomic|offset|length|2361563|​|2361564|分页组件(pagination.jsx或js)|blockquote|2361565|import+React,+{+Component+}+from+"react";+
import+{+Pagination+}+from+"react-bootstrap";+
import+PropTypes+from+"prop-types";

export+default+class+PaginationHandler+extends+Component+{++

+++constructor(props)+{
++++super(props);
++++this.state+=+{
++++++paging:+{
++++++++offset:+0,
++++++++limit:+10
++++++},
++++++active:+0
++++};++
++++}

++pagingHandler+=+()+=>+{
++++let+offset+=+parseInt(event.target.id);
++++this.setState({
++++++active:+offset
++++});
++++this.props.pageHandler(event.target.id+-+1);+++};

++nextHandler+=+()+=>+{
++++let+active+=+this.state.active;
++++this.setState({
++++++active:+active+%2B+1
++++});
++++this.props.pageHandler(active+%2B+1);+++};

++backHandler+=+()+=>+{
++++let+active+=+this.state.active;
++++this.setState({
++++++active:+active+-+1
++++});
++++this.props.pageHandler(active+-+1);+++};

++renderPageNumbers+=+(pageNumbers,+totalPages)+=>+{
++++let+{+active+}+=+this.state;
++++return+(
++++++<Pagination>
++++++++<Pagination.Prev+disabled={active+<+5}+onClick={+active+>5+&&+this.backHandler}+/>

++++++++{
++++++pageNumbers.map(number+=>+{
++++++++++++++if+(
++++++++++++++++number+>=+parseInt(active)+-+3+&&
++++++++++++++++number+<=+parseInt(active)+%2B+3+
++++++++++++++)+{
++++++++++++++++return+(
++++++++++++++++++<Pagination.Item
++++++++++++++++++++id={number}
++++++++++++++++++++active={number+==+active}
++++++++++++++++++++onClick={this.pagingHandler}
++++++++++++++++++>
++++++++++++++++++++{number}
++++++++++++++++++</Pagination.Item>
++++++++++++++++);
++++++++++++++}+else+{
++++++++++++++++return+null;
++++++++++++++}
++++++++})}
++++++++<Pagination.Next+onClick={+active+<=+totalPages+-4+&&+this.nextHandler}+/>
++++++</Pagination>
++++);+++};

++buildComponent+=+(props,+state)+=>+{
++++const+{+totalPages+}+=+props;
++++const+pageNumbers+=+[];
++++for+(let+i+=+1;+i+<=+totalPages;+i%2B%2B)+{
++++++pageNumbers.push(i);
++++}
++++return+(
++++++<div+className="pull-right">
++++++{this.renderPageNumbers(pageNumbers+,totalPages)}
++++++</div>
++++);+++
};

++render()+{
++++return+this.buildComponent(this.props,+this.state);
++}+

}+
+++PaginationHandler.propTypes+=+
+++{
++++paging:+PropTypes.object,
++++pageHandler:+PropTypes.func,
++++totalPages:+PropTypes.object+
+++};|code-block|syntax|javascript|2361566|在父组件中使用上述子组件，如下所示|2361567|import+Pagination+from+"../pagination";

pageHandler+=+(offset)+=>{
++++++this.setState(({+paging+})+=>+({
++++++++paging:+{+...paging,+offset:+offset+}
++++++}));
+++}
+++render()+{
++++return+(
++++++<div>
+++++++++<Pagination
++++++++++paging+=+{paging}
++++++++++pageHandler+=+{this.pageHandler}
++++++++++totalPages+=+{totalPages}>
++++++++++</Pagination>
++++++</div>
++++);
++}|2361568|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/775dbb477c4aa7813a11a075b667c2a2.png|imageAlt^0|0|0|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@$E|15|F|16|1|17]]|A|$]]|$1|G|3|H|5|6|7|18|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|K|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11|12|-4]]]]

<p>Here is a way to create your Custom Pagination Component from react-bootstrap lib and this component you can use Throughout your project
<a href="https://i.stack.imgur.com/2rYPG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2rYPG.png" alt="enter image description here" /></a></p>
<blockquote>
<p>Your Pagination Component (pagination.jsx or js)</p>
</blockquote>
<pre><code>import React, { Component } from &quot;react&quot;; 
import { Pagination } from &quot;react-bootstrap&quot;; 
import PropTypes from &quot;prop-types&quot;;

export default class PaginationHandler extends Component {  

   constructor(props) {
    super(props);
    this.state = {
      paging: {
        offset: 0,
        limit: 10
      },
      active: 0
    };  
    }

  pagingHandler = () =&gt; {
    let offset = parseInt(event.target.id);
    this.setState({
      active: offset
    });
    this.props.pageHandler(event.target.id - 1);   };

  nextHandler = () =&gt; {
    let active = this.state.active;
    this.setState({
      active: active + 1
    });
    this.props.pageHandler(active + 1);   };

  backHandler = () =&gt; {
    let active = this.state.active;
    this.setState({
      active: active - 1
    });
    this.props.pageHandler(active - 1);   };

  renderPageNumbers = (pageNumbers, totalPages) =&gt; {
    let { active } = this.state;
    return (
      &lt;Pagination&gt;
        &lt;Pagination.Prev disabled={active &lt; 5} onClick={ active &gt;5 &amp;&amp; this.backHandler} /&gt;

        {
      pageNumbers.map(number =&gt; {
              if (
                number &gt;= parseInt(active) - 3 &amp;&amp;
                number &lt;= parseInt(active) + 3 
              ) {
                return (
                  &lt;Pagination.Item
                    id={number}
                    active={number == active}
                    onClick={this.pagingHandler}
                  &gt;
                    {number}
                  &lt;/Pagination.Item&gt;
                );
              } else {
                return null;
              }
        })}
        &lt;Pagination.Next onClick={ active &lt;= totalPages -4 &amp;&amp; this.nextHandler} /&gt;
      &lt;/Pagination&gt;
    );   };

  buildComponent = (props, state) =&gt; {
    const { totalPages } = props;
    const pageNumbers = [];
    for (let i = 1; i &lt;= totalPages; i++) {
      pageNumbers.push(i);
    }
    return (
      &lt;div className=&quot;pull-right&quot;&gt;
      {this.renderPageNumbers(pageNumbers ,totalPages)}
      &lt;/div&gt;
    );   
};

  render() {
    return this.buildComponent(this.props, this.state);
  } 

} 
   PaginationHandler.propTypes = 
   {
    paging: PropTypes.object,
    pageHandler: PropTypes.func,
    totalPages: PropTypes.object 
   };
</code></pre>
<blockquote>
<p>Use of Above Child Component in your Parent Component as shown below</p>
</blockquote>
<pre><code>import Pagination from &quot;../pagination&quot;;

pageHandler = (offset) =&gt;{
      this.setState(({ paging }) =&gt; ({
        paging: { ...paging, offset: offset }
      }));
   }
   render() {
    return (
      &lt;div&gt;
         &lt;Pagination
          paging = {paging}
          pageHandler = {this.pageHandler}
          totalPages = {totalPages}&gt;
          &lt;/Pagination&gt;
      &lt;/div&gt;
    );
  }
     
</code></pre>


blocks|key|632512|text|用于呈现分页的ReactJS哑组件。您还可以使用此库：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|632513|https://www.npmjs.com/package/react-js-pagination|code-block|syntax|javascript|632514|以下是一些例子：|632515|http://vayser.github.io/react-js-pagination/|offset|length|632516|或|632517|您还可以使用此https://codepen.io/PiotrBerebecki/pen/pEYPbY|632518|entityMap|0|LINK|mutability|MUTABLE|url|1|https://codepen.io/PiotrBerebecki/pen/pEYPbY^0|0|0|0|0|18|0|0|0|7|18|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|12|8|@]|9|@$K|13|L|14|1|15]]|A|$]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@$K|18|L|19|1|1A]]|A|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|J]]|X|$5|T|U|V|A|$W|Y]]]]

<p>A ReactJS dumb component to render pagination. You can also use this Library:</p>

<pre><code>https://www.npmjs.com/package/react-js-pagination
</code></pre>

<p>Some Examples are Here: </p>

<p><a href="http://vayser.github.io/react-js-pagination/" rel="nofollow noreferrer">http://vayser.github.io/react-js-pagination/</a></p>

<p>OR </p>

<p>You can also Use this <a href="https://codepen.io/PiotrBerebecki/pen/pEYPbY" rel="nofollow noreferrer">https://codepen.io/PiotrBerebecki/pen/pEYPbY</a></p>


blocks|key|632529|text|确保您将其作为我使用过的塔布勒反应的独立组件|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|632530|import+*+as+React+from+"react";
import+{+Page,++Button+}+from+"tabler-react";
class+PaginateComponent+extends+React.Component+{
++++constructor(props)+{
++++++++super(props);
++++++++this.state+=+{
++++++++++++array:+[1,+2,+3,+4,+5,+6,+7,+8,+9,+10],
++++++++++++limit:+5,+//+optional
++++++++++++page:+1
++++++++};
++++}

paginateValue+=+(page)+=>+{
++++this.setState({+page:+page+});
++++console.log(page)+//+access+this+value+from+parent+component+
}

paginatePrevValue+=+(page)+=>+{
++++this.setState({+page:+page+});
++++console.log(page)++//+access+this+value+from+parent+component
}
paginateNxtValue+=+(page)+=>+{
+++++++this.setState({+page:+page+});
+++++++console.log(page)++//+access+this+value+from+parent+component
++++}

++++render()+{
++++++++return+(
++++++++++++<div>++++
++++++++++++++++<div>
++++++++++++++++++++<Button.List>
++++++++++++++++++++++++<Button
++++++++++++++++++++++disabled={this.state.page+===+0}
++++++++++++++++++++++onClick={()+=>+this.paginatePrevValue(this.state.page+-+1)}
++++++++++++++++++++++++++++outline
++++++++++++++++++++++++++++color="primary"
++++++++++++++++++++++++>
++++++++++++++++++++++++++++Previous
++++++++++++++++++++++</Button>

++++++++++++++++++++++++{this.state.array.map((value,+index)+=>+{
++++++++++++++++++++++++++++return+(
++++++++++++++++++++++++++++++++<Button
++++++++++++++++++++++++++++++++++++onClick={()+=>+this.paginateValue(value)}
++++++++++++++++++++++++++++++++++++color={
++++++++++++++++++++++++++++++++++++++++this.state.page+===+value
++++++++++++++++++++++++++++++++++++++++++++?+"primary"
++++++++++++++++++++++++++++++++++++++++++++:+"secondary"
++++++++++++++++++++++++++++++++++++}
++++++++++++++++++++++++++++++++>
++++++++++++++++++++++++++++++++++++{value}
++++++++++++++++++++++++++++++++</Button>
++++++++++++++++++++++++++++);
++++++++++++++++++++++++})}

++++++++++++++++++++++++<Button
++++++++++++++++++++++++++++onClick={()+=>+this.paginateNxtValue(this.state.page+%2B+1)}
++++++++++++++++++++++++++++outline
++++++++++++++++++++++++++++color="secondary"
++++++++++++++++++++++++>
++++++++++++++++++++++++++++Next
++++++++++++++++++++++</Button>
++++++++++++++++++++</Button.List>
++++++++++++++++</div>
++++++++++++</div>

++++++++)
++++}
}

export+default+PaginateComponent;|code-block|syntax|javascript|632531|entityMap|0|LINK|mutability|MUTABLE|url|http://tabler-react.com/^0|C|5|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Make sure you make it as a separate component 
I have used <a href="http://tabler-react.com" rel="nofollow noreferrer">tabler-react</a></p>

<pre><code>import * as React from "react";
import { Page,  Button } from "tabler-react";
class PaginateComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            limit: 5, // optional
            page: 1
        };
    }

paginateValue = (page) =&gt; {
    this.setState({ page: page });
    console.log(page) // access this value from parent component 
}

paginatePrevValue = (page) =&gt; {
    this.setState({ page: page });
    console.log(page)  // access this value from parent component
}
paginateNxtValue = (page) =&gt; {
       this.setState({ page: page });
       console.log(page)  // access this value from parent component
    }

    render() {
        return (
            &lt;div&gt;    
                &lt;div&gt;
                    &lt;Button.List&gt;
                        &lt;Button
                      disabled={this.state.page === 0}
                      onClick={() =&gt; this.paginatePrevValue(this.state.page - 1)}
                            outline
                            color="primary"
                        &gt;
                            Previous
                      &lt;/Button&gt;

                        {this.state.array.map((value, index) =&gt; {
                            return (
                                &lt;Button
                                    onClick={() =&gt; this.paginateValue(value)}
                                    color={
                                        this.state.page === value
                                            ? "primary"
                                            : "secondary"
                                    }
                                &gt;
                                    {value}
                                &lt;/Button&gt;
                            );
                        })}

                        &lt;Button
                            onClick={() =&gt; this.paginateNxtValue(this.state.page + 1)}
                            outline
                            color="secondary"
                        &gt;
                            Next
                      &lt;/Button&gt;
                    &lt;/Button.List&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        )
    }
}

export default PaginateComponent;
</code></pre>


blocks|key|632568|text|我已经在ReactJs中实现了分页%2B搜索，请参见输出：反应分页|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|632569|在GitHub：https://github.com/navanathjadhav/generic-pagination上查看完整代码|632570|还可以访问本文，了解分页的逐步实现：https://everblogs.com/react/3-simple-steps-to-add-pagination-in-react/|632571|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/8n6D7.gif|1|https://github.com/navanathjadhav/generic-pagination|2|https://everblogs.com/react/3-simple-steps-to-add-pagination-in-react/^0|R|4|0|0|8|1G|1|0|I|1Y|2|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|H|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]]]

<p>I have implemented pagination + search in ReactJs, see the output:
<a href="https://i.stack.imgur.com/8n6D7.gif" rel="nofollow noreferrer">Pagination in React</a></p>
<p>View complete code on GitHub: <a href="https://github.com/navanathjadhav/generic-pagination" rel="nofollow noreferrer">https://github.com/navanathjadhav/generic-pagination</a></p>
<p>Also visit this article for step by step implementation of pagination: <a href="https://everblogs.com/react/3-simple-steps-to-add-pagination-in-react/" rel="nofollow noreferrer">https://everblogs.com/react/3-simple-steps-to-add-pagination-in-react/</a></p>


blocks|key|440226|text|请在代码框中查看此代码示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|440227|https://codesandbox.io/s/pagino-13pit|offset|length|440228|​|440229|📷|atomic|440230|440231|import+Pagino+from+"pagino";
import+{+useState,+useMemo+}+from+"react";

export+default+function+App()+{
++const+[pages,+setPages]+=+useState([]);

++const+pagino+=+useMemo(()+=>+{
++++const+_+=+new+Pagino({
++++++showFirst:+false,
++++++showLast:+false,
++++++onChange:+(page,+count)+=>+setPages(_.getPages())
++++});

++++_.setCount(10);

++++return+_;
++},+[]);

++const+hanglePaginoNavigation+=+(type)+=>+{
++++if+(typeof+type+===+"string")+{
++++++pagino[type]?.();
++++++return;
++++}

++++pagino.setPage(type);
++};

++return+(
++++<div>
++++++<h1>Page:+{pagino.page}</h1>
++++++<ul>
++++++++{pages.map((page)+=>+(
++++++++++<button+key={page}+onClick={()+=>+hanglePaginoNavigation(page)}>
++++++++++++{page}
++++++++++</button>
++++++++))}
++++++</ul>
++++</div>
++);
}|code-block|syntax|javascript|440232|entityMap|0|LINK|mutability|MUTABLE|url|1|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/464c8042c355bc7cd09631f734486d93.png|imageAlt^0|0|0|11|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|K|3|G|5|6|7|1D|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1E|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]|X|$5|Y|U|Z|A|$10|11|12|-4]]]]

<p>Please see this code sample in codesandbox</p>
<p><a href="https://codesandbox.io/s/pagino-13pit" rel="nofollow noreferrer">https://codesandbox.io/s/pagino-13pit</a></p>
<p><a href="https://i.stack.imgur.com/Yd16U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yd16U.png" alt="enter image description here" /></a></p>
<pre><code>import Pagino from &quot;pagino&quot;;
import { useState, useMemo } from &quot;react&quot;;

export default function App() {
  const [pages, setPages] = useState([]);

  const pagino = useMemo(() =&gt; {
    const _ = new Pagino({
      showFirst: false,
      showLast: false,
      onChange: (page, count) =&gt; setPages(_.getPages())
    });

    _.setCount(10);

    return _;
  }, []);

  const hanglePaginoNavigation = (type) =&gt; {
    if (typeof type === &quot;string&quot;) {
      pagino[type]?.();
      return;
    }

    pagino.setPage(type);
  };

  return (
    &lt;div&gt;
      &lt;h1&gt;Page: {pagino.page}&lt;/h1&gt;
      &lt;ul&gt;
        {pages.map((page) =&gt; (
          &lt;button key={page} onClick={() =&gt; hanglePaginoNavigation(page)}&gt;
            {page}
          &lt;/button&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
}
</code></pre>


blocks|key|632652|text|1-使用react-bootstrap|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|632653|import+React+from+"react";
import+{+Pagination+}+from+"react-bootstrap";
import+Link+from+"next/link";

interface+PaginateProps+{
++pages:+number;
++page:+number;
++keyword?:+string;
++isAdmin?:+boolean;
}

const+Paginate+=+({
++pages,
++page,
++//+keyword+is+for+searching
++keyword+=+"",
++isAdmin+=+false,
}:+PaginateProps)+=>+{
++return+pages+>+1+?+(
++++<Pagination>
++++++{/*+keys+returns+a+new+Array+iterator+contians+the+keys+for+each+index+*/}+
++++++//+pages+is+total+number+of+pages
++++++{[...Array(pages).keys()].map((x)+=>+(
++++++++//+this+is+next.js+component.+you+could+use+react+Link
++++++++<Link
++++++++++passHref
++++++++++key={x+%2B+1}
++++++++++href={
++++++++++++!isAdmin
++++++++++++++//+since+array+indexing+starts+at+0,+use+x%2B1
++++++++++++++?+`/?keyword=${keyword}&page=${x+%2B+1}`
++++++++++++++:+`/admin/productlist/?keyword=${keyword}&page=${x+%2B+1}`
++++++++++}
++++++++>
++++++++++<Pagination.Item+active={x+%2B+1+===+page}>{x+%2B+1}</Pagination.Item>
++++++++</Link>
++++++))}
++++</Pagination>
++)+:+null;
};

export+default+Paginate;|code-block|syntax|javascript|632654|然后在一页纸上用它。|632655|++++<Paginate+page={page}+pages={pages}+keyword={keyword}+/>|632656|2-使用react+js分页|632657|++import+Pagination+from+"react-js-pagination";

++//+bootstrap+class+to+center+
++<div+className="d-flex+justify-content-center+mt-5">
++++++<Pagination
++++++++activePage={page}
++++++++itemsCountPerPage={resPerPageValue}
++++++++totalItemsCount={Count}
++++++++onChange={handlePagination}
++++++++nextPageText={"Next"}
++++++++prevPageText={"Prev"}
++++++++firstPageText={"First"}
++++++++lastPageText={"Last"}
++++++++//+overwriting+the+style
++++++++itemClass="page-item"
++++++++linkClass="page-link"
++++++/>
++++</div>|632658|onChange处理程序|632659|+const+handlePagination+=+(pageNumber)+=>+{
++++//+window.location.href+will+reload+entire+page
++++router.push(`/?page=${pageNumber}`);
++};|632660|entityMap^0|4|F|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|16|8|@]|D|@]|E|$]]|$1|U|3|V|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|W|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|X|$]]

<p>1- Use <code>react-bootstrap</code></p>
<pre><code>import React from &quot;react&quot;;
import { Pagination } from &quot;react-bootstrap&quot;;
import Link from &quot;next/link&quot;;

interface PaginateProps {
  pages: number;
  page: number;
  keyword?: string;
  isAdmin?: boolean;
}

const Paginate = ({
  pages,
  page,
  // keyword is for searching
  keyword = &quot;&quot;,
  isAdmin = false,
}: PaginateProps) =&gt; {
  return pages &gt; 1 ? (
    &lt;Pagination&gt;
      {/* keys returns a new Array iterator contians the keys for each index */} 
      // pages is total number of pages
      {[...Array(pages).keys()].map((x) =&gt; (
        // this is next.js component. you could use react Link
        &lt;Link
          passHref
          key={x + 1}
          href={
            !isAdmin
              // since array indexing starts at 0, use x+1
              ? `/?keyword=${keyword}&amp;page=${x + 1}`
              : `/admin/productlist/?keyword=${keyword}&amp;page=${x + 1}`
          }
        &gt;
          &lt;Pagination.Item active={x + 1 === page}&gt;{x + 1}&lt;/Pagination.Item&gt;
        &lt;/Link&gt;
      ))}
    &lt;/Pagination&gt;
  ) : null;
};

export default Paginate;
</code></pre>
<p>then use it in a page.</p>
<pre><code>    &lt;Paginate page={page} pages={pages} keyword={keyword} /&gt;
</code></pre>
<p>2- use react-js pagination</p>
<pre><code>  import Pagination from &quot;react-js-pagination&quot;;

  // bootstrap class to center 
  &lt;div className=&quot;d-flex justify-content-center mt-5&quot;&gt;
      &lt;Pagination
        activePage={page}
        itemsCountPerPage={resPerPageValue}
        totalItemsCount={Count}
        onChange={handlePagination}
        nextPageText={&quot;Next&quot;}
        prevPageText={&quot;Prev&quot;}
        firstPageText={&quot;First&quot;}
        lastPageText={&quot;Last&quot;}
        // overwriting the style
        itemClass=&quot;page-item&quot;
        linkClass=&quot;page-link&quot;
      /&gt;
    &lt;/div&gt;
</code></pre>
<p>onChange handler</p>
<pre><code> const handlePagination = (pageNumber) =&gt; {
    // window.location.href will reload entire page
    router.push(`/?page=${pageNumber}`);
  };
</code></pre>


<p>I am new to ReactJS and am creating a simple TODO application in it. Actually, it is a very basic app with no DB connection, tasks are stored in an array. I added Edit and Delete functionality to it now I want to add pagination.</p>
<p>How do I implement it? Any help will be appreciated. Thank you...!!</p>


How to implement pagination in React

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我是ReactJS的新手，并且正在创建一个简单的TODO应用程序。实际上，它是一个没有DB连接的非常基本的应用程序，任务存储在一个数组中。我添加了编辑和删除功能到它，现在我想添加分页。我如何实现它？任何帮助都将不胜感激。谢谢.！

问如何在React中实现分页
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React中实现分页EN