反應路由器導航鏈接從休息api

Question

我是新的反應和麪臨的問題，當試圖完成瀏覽我的API頁面。我所做的：http://pastebin.com/hxf9PJ8k 它完美地符合我的意見，但只顯示第一個頁面。鏈接到所有用戶配置文件也是如此，只需向api鏈接添加一個id很簡單。所以，我的API返回給我實際上是用戶的對象，以及數據庫中用戶的總數，並鏈接到下一頁（如果存在），或者返回null和上一頁或爲null。現在我不明白如何使用這些鏈接來創建2個按鈕 - next和prev。如何通過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，但我只是做了上一個按鈕邏輯，你自己看着辦吧怎麼辦下一個按鈕組件。