반응 라우터가 나머지 api에서 링크를 이동

Question

나는 api 페이지를 탐색하려고 할 때 반응이 새롭고 문제에 직면했습니다. 내가 한 짓 : http://pastebin.com/hxf9PJ8k 내 의견으로는 완벽하게 작동하지만 첫 번째 API 페이지 만 표시합니다. 모든 사용자 프로필에 대한 링크도 작동합니다. API 링크에 ID를 추가하는 것만으로 간단합니다. 그래서, 내 api는 나에게 실제로 사용자 인 객체와 데이터베이스의 사용자 수 및 다음 페이지로 연결되는 링크 수 (null 또는 이전 페이지 또는 null)를 반환했습니다. 이제는 그 링크를 사용하여 2 개의 버튼을 만드는 방법을 이해할 수 없습니다 - 다음과 이전. 전체 링크를 전달하거나 page= 옆에있는 부분을 사용자 소품에게 전달하고 xhr을 요청하는 방법 Api 예보기 : count: 2302 next: "http://localhost:8080/instant/api/?page=2" previous:
results:
0: Object 1: Object 2: Object 미리 감사드립니다.

Answer 1

기본적으로해야 할 일은 현재 페이지 변수를 만들어 로직을 매우 간단하게 만드는 것입니다.

는 이전 및 위해 다음 버튼, 페이징 조건을 처리 간단하게 유지하기 위해 상위 구성 요소에 대한 모든 클릭 이벤트를 처리하기 위해 별도의 구성 요소를 만들 수 있습니다.

class PrevBtn extends React.Component { 
    constructor(props){ 
     super(props); 
     this.props.clickHandler = this.props.clickHandler.bind(this); 
    } 

    render() { 
     let button = null; 
     const {currentPage} = this.props; 

     if(currentPage>1){ 
      button = <a onClick={this.props.clickHandler}>Prev</a> 
     }else{ 
      button = <a disabled="disabled">Prev</a> 
     } 
     return(<div>{button}</div>) 
     } 
    } 

난 그냥 codePen에 당신을 위해 예를했지만 난 그냥 이전 버튼 로직을했다, 당신은 다음 버튼 구성 요소를 수행하는 방법을 알아낼 수 있습니다.