向React中的用戶顯示不同的導航欄

我正在使用React和Firebase。我想根據用戶是否登錄而向用戶展示不同的導航欄，但是，我並不十分確定如何去解決這個問題。這是我開始的。我會創建兩個組件並呈現另一個Nav。非常懷疑這種方法是正確的。向React中的用戶顯示不同的導航欄

var Nav = React.createClass({ 
    toggleNav: function(){ 
    // some code 
    } 
    render: function() { 
    return (
    <nav className="navbar navbar-default"> 
     <div className="container-fluid"> 
     <div className="navbar-header"> 
      <a className="navbar-brand" href="#">WebSiteName</a> 
     </div> 
     <ul className="nav navbar-nav"> 
      <li onClick={this.createQuiz}><a href="#">Create Quiz</a></li> 
      <li onClick={this.toggleNav}><a href="#">Sign In/ Sign Up</a></li> 
     </ul> 
     </div> 
    </nav> 
    ) 
    } 
}); 

ReactDOM.render(<Nav />, document.getElementById("app"));

或者我應該這樣做，而不是？我會在下面創建UserNav組件。

var Nav = React.createClass({ 
    render: function() { 
    return (
     <div className="nav"> 
     {user ? <UserNav /> : <Nav />} 
     </div> 
    ) 
    } 
})

謝謝！

來源

2016-08-01 maxwellgover

你既可以創建兩個組件，其中每一個代表一個特定的導航欄，或者你可以只創建一個導航欄組件，並通過您的導航欄或相應的元素作爲道具最好的孩子是這樣的：

function NavBar(props) { 
    return (
    <nav> 
     <ul> 
     // Loop over {props.children} 
     </ul> 
    </nav> 
); 
} 

function NavBar-Link(props) { 
    return (
    <li> 
     Your link. You probably want to pass some props like 'text', 'link', ... to it 
    </li> 
); 
} 

ReactDOM.render(
    <NavBar> 
    <NavBar-Link /> 
    <NavBar-Link /> 
    <NavBar-Link /> 
    // ... 
    </NavBar>, 
    document.getElementById('app') 
);

你將用戶的登錄狀態存儲在某處。無論是在你的組件本地還是像redux那樣的任何類似flux的框架中，都沒關係。在導入您的NavBar組件的組件中，登錄狀態將決定您想要傳遞哪組NavBar-Link組件，就像在後一個示例中那樣。我希望你得到大致的想法:)

編輯：此外，應該只能由某個角色訪問的每個組件還應該檢查登錄狀態，並呈現自己/無/ 403警告/ ...分別避免有人手動訪問它。

來源

2016-08-01 19:47:37 hollandThomas

向React中的用戶顯示不同的導航欄

回答

相關問題