javascript - 同一页面上的 React Paginate Second Instance 不会重新呈现

Question

我正在使用 react-paginate 进行分页，我在同一页面上有两个实例。一个在顶部，一个在底部，当收到新的 Prop 时，只有顶部的一个被重新渲染。下面是代码，我已经检查了组件上的不同生命周期方法，如果它接收到新的 Prop 并调用了渲染方法，一切似乎都在工作，但在页面中只有顶部分页有效，这意味着如果我点击第 2 页，第二个实例应该也更改为第 2 页，因为它收到了所选页面的新值。有什么想法吗？

 import React from 'react';
 import ReactPaginate from 'react-paginate';

    export default class Pager extends React.Component {
      constructor() {
        super();
      }

      render() {

        return (
          <div className={`pager ${this.props.position}`}>
            <ReactPaginate 
              previousLabel={'Prev'}
              nextLabel = {'Next'}
              breakLabel = {<a href="">...</a>}
              breakClassName = {"break-me"}
              pageCount = {this.props.totalPages}
              marginPagesDisplayed ={1}
              pageRangeDisplayed={2}
              onPageChange = {this.props.onPageNumberClick}
              containerClassName = {"page-links-container"}
              pageLinkClassName = {"pg-links"}
              activeClassName = {"active"} 
              previousClassName = {"prev-pg-lnk"}
              nextClassName = {"next-pg-lnk"}
              disabledClassName = {"disabled"}
              initialPage = {parseInt(this.props.selectedPage) -1}
              />
          </div>
        );
      }
    }

Answer 1

您必须使用 forcePage 属性来同步这两个分页。

因此，一旦页面发生更改，在 onPageChange 回调中，您将使用更新后的页码更新包装器组件(包含两个分页组件)的状态。要使两个分页同步工作 - 您必须将 forcePage 设置为等于包装器的状态 selected 页码。

我已经使用 plugin's official demo 在本地对其进行了测试.下面是示例代码(关注 render 和 handlePageClick 方法):

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ReactPaginate from 'react-paginate';
import $ from 'jquery';

window.React = React;


export class CommentList extends Component {
  render() {
    let commentNodes = this.props.data.map(function(comment, index) {
      return (
        <div key={index}>{comment.comment}</div>
      );
    });

    return (
      <div id="project-comments" className="commentList">
        <ul>
          {commentNodes}
        </ul>
      </div>
    );
  }
};

export class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      offset: 0,
      selected: null
    }
  }

  loadCommentsFromServer() {
    $.ajax({
      url      : this.props.url,
      data     : {limit: this.props.perPage, offset: this.state.offset},
      dataType : 'json',
      type     : 'GET',

      success: data => {
        this.setState({data: data.comments, pageCount: Math.ceil(data.meta.total_count / data.meta.limit)});
      },

      error: (xhr, status, err) => {
        console.error(this.props.url, status, err.toString());
      }
    });
  }

  componentDidMount() {
    this.loadCommentsFromServer();
  }

  handlePageClick = (data) => {
    let selected = data.selected;
    let offset = Math.ceil(selected * this.props.perPage);

    this.setState({offset: offset, selected}, () => {
      this.loadCommentsFromServer();
    });
  };

  render() {
    return (
      <div className="commentBox">
        <CommentList data={this.state.data} />
        <ReactPaginate previousLabel={"previous"}
                       nextLabel={"next"}
                       breakLabel={<a href="">...</a>}
                       breakClassName={"break-me"}
                       pageCount={this.state.pageCount}
                       marginPagesDisplayed={2}
                       pageRangeDisplayed={5}
                       onPageChange={this.handlePageClick}
                       containerClassName={"pagination"}
                       subContainerClassName={"pages pagination"}
                       activeClassName={"active"}
                       forcePage={this.state.selected} />

        <ReactPaginate previousLabel={"previous"}
                       nextLabel={"next"}
                       breakLabel={<a href="">...</a>}
                       breakClassName={"break-me"}
                       pageCount={this.state.pageCount}
                       marginPagesDisplayed={2}
                       pageRangeDisplayed={5}
                       onPageChange={this.handlePageClick}
                       containerClassName={"pagination"}
                       subContainerClassName={"pages pagination"}
                       activeClassName={"active"}
                       forcePage={this.state.selected} />
      </div>
    );
  }
};

ReactDOM.render(
  <App url={'http://localhost:3000/comments'}
       author={'adele'}
       perPage={10} />,
  document.getElementById('react-paginate')
);