Question

我在我的一个React组件中设置了分页（使用第三方组件）。每次单击页面按钮时，都会执行此功能：

 handlePageChange= (page)=>{
    history.push(`/duplicates?page=${page}`)        
}

我正在使用＆＃34;路由器＆＃34;来自＆＃34; react-router-dom＆＃34;和＆＃34; createBrowserHistory＆＃34;来自JS历史库：

当组件安装时，我只需提取＆＃34;页面＆＃34;查询参数，并调度一个Redux操作，该操作获取所有相关数据，并将其置于Redux状态：

  componentDidMount(){
    this.props.fetch(this.state.activePage)
}

＆＃34; activePage＆＃34;取自组件状态：

state={         
     activePage: this.queryParams.page || 1
 }

一切都运作良好，有一个非常基本的＆＃34;缺陷＆＃34;：由于我使用history.push对每一个分页动作，整个组件重新安装。当然，我可以在我的＆＃34;页面＆＃34;中来回导航，甚至为它们添加书签，但整个组件需要重新渲染的事实似乎破坏了React的主要目的之一：非常当谈到DOM操作时，效率很高。

有没有办法设置分页，而无需在历史和效率之间做出选择？

编辑：这是组件：

import React from 'react';
import _ from "lodash";
import { connect } from 'react-redux';
import { searchAction, fetchDuplicates } from '../../actions/products';
import DuplicateProduct from './DuplicateProduct';
import Pagination from 'react-js-pagination'
import queryString from 'query-string';
import {history} from '../../routers/AppRouter';



class Duplicates extends React.Component{
     queryParams= queryString.parse(this.props.location.search); 

     state={         
         activePage: this.queryParams.page || 1
     }   



handlePageChange= (page)=>{
    history.push(`/duplicates?page=${page}`)         
}

componentDidMount(){
    this.props.fetch(this.state.activePage)        
}  

render(){      
    console.log(this.queryParams.page)
    return(
      <div>
      <h1>Duplicate Titles</h1>

      <p>number of pages: {this.props.numberOfPages}</p>
      <Pagination
        activePage={parseInt(this.state.activePage)}
        itemsCountPerPage={150}
        totalItemsCount={this.props.numberOfProducts}
        pageRangeDisplayed={10}
        onChange={this.handlePageChange}
        className="pagination"

      />

       <br/>

       {this.props.duplicates.length>0 &&(
         this.props.duplicates[0].map((duplicate_group)=>{
             return (
                 <div  key={duplicate_group[0].id}> 
                     <DuplicateProduct duplicate_group={duplicate_group}/> 
                     <hr/>                     
                 </div>
             )

         })  
       )
        }


      </div>  
    );

};
}

const mapStateToProps= (state)=>({
    duplicates: state.products.duplicates,
    numberOfPages: state.products.numberOfPages,
    numberOfProducts: state.products.numberOfProducts
}) 

const mapDispatchToProps =(dispatch,props)=>({
    fetch: (page)=> dispatch(fetchDuplicates(page))
})


export default connect(mapStateToProps, mapDispatchToProps)(Duplicates);

这是PrivateRoute：

import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
import Header from '../components/Header';

export const PrivateRoute = ({
  isAuthenticated,
  component: Component,
  ...rest
}) => (
    <Route {...rest} component={(props) => (
      isAuthenticated ? (
        <div>
          <Header />
          <Component {...props} />
        </div>
      ) : (
          <Redirect to="/" />
        )
    )} />
  );

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isLoggedIn
});

export default connect(mapStateToProps)(PrivateRoute);

在React组件中使用分页，而无需重新呈现整个组件

0 个答案: