如何在反應中創建頁面

我正在創建一個非常簡單的應用程序。它將有許多頁面上包含最少的數據。我正在尋找最簡單的方法，以儘可能簡單的方式在頁面之間切換。如何在反應中創建頁面

這是我當前的代碼：

render() { 
    return (
     <div className="App test"> 
     <nav className="navbar pure-menu pure-menu-horizontal"> 
      <a href="#" className="pure-menu-heading pure-menu-link"> 
      Page 1 
      </a> 
      { 
      }<ul className="pure-menu-list"> 
       <li className="pure-menu-item"><a href="#" className="pure-menu-link">Page 2</a></li> 
       <li className="pure-menu-item"><a href="#" className="pure-menu-link">Page 3</a></li> 
       <li className="pure-menu-item"><a href="#" className="pure-menu-link">Page 4</a></li> 
       </ul> 
      } 
      </nav> 
      <main className="container"> 
       <div className="pure-g"> 
       <div className="pure-u-1-1"> 
        <p> 
        Page 1 text 
        </p> 
        <p> 
        Page 2 text 
        </p> 
        <p> 
        Page 3 text 
        </p>      
        <p> 
        Page 4 text 
        </p> 

       </div> 
       </div> 
      </main> 
     </div>); 
    } 
}

有沒有一個標準的內容之間進行切換？（頁面文字1,2,3,4）。

來源

2017-06-05 HappyCoder

這麼簡單嗎？ :)。最簡單的方法可能是在組件中保存一個pageNumber狀態，並且只有當它是該數字時纔會呈現特定的頁面。使用參數調用setPageNumber以查看組件呈現不同的頁面。

這顯然不是最好的解決方案或可擴展的。

class App extends React.Component { 
    constructor() { 
     super(); 

     this.state = { 
      pageNumber: 0 
     }; 
    } 
    onClickLink = (pageNumber) => { 
     this.setState({ pageNumber }); 
    } 
    render() { 
     <div className="pure-u-1-1"> 
      {this.state.pageNumber === 0 ? <p></p> : null} 
      {this.state.pageNumber === 1 ? <p></p> : null} 
      {this.state.pageNumber === 2 ? <p></p> : null} 
      {this.state.pageNumber === 3 ? <p></p> : null} 
     </div> 
    } 
}

來源

2017-06-05 23:12:09

是的，這不會工作，這樣做的稍微複雜的方式是什麼？ – HappyCoder

爲什麼不能這樣工作？請明確點。 – Hamms

更好的方法是將功能添加onClickLink到頁面的鏈接，並把所有的網頁在一個陣列，並且在你希望它是有這樣的事的地方：

onClickLink = (pageNumber, event) => { 
      this.setState({ pageNumber }); 
     } 

    render() { 
      <ul className="pure-menu-list"> 
       <li className="pure-menu-item"><a href="#" className="pure-menu-link" onClick=onClickLink.bind(null, 2)>Page 2</a></li> 
      </ul> 


      <div className="pure-u-1-1"> 
       <p>arrayOfPageComponents[this.state.pageNumber]</p> 
      </div> 
     }

所以這個函數被綁定到頁碼值的鏈接上（在我的例子2中），當它被調用時，它被調用2，所以狀態將被改爲2，這個改變將被React檢測到並且組件將被重新渲染，現在從頁面數組中讀取第二個值。

來源

2017-06-05 23:50:28

如何在反應中創建頁面

回答

相關問題