如何在反应中创建页面

我正在创建一个非常简单的应用程序。它将有许多页面上包含最少的数据。我正在寻找最简单的方法，以尽可能简单的方式在页面之间切换。如何在反应中创建页面

这是我当前的代码：

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

如何在反应中创建页面

回答

相关问题