他のNavbarとSigned Inのユーザーが反応している

Question

React with Firebaseを使用しています。私は彼らがサインインされているかどうかに応じて、ユーザーに異なるナビゲーションバーを表示したいと思いますが、私はそれについてどうやって行くのか100％は確信していません。ここから始めています。私は2つのコンポーネントを作成し、もう一方のNavをレンダリングします。このアプローチが正しいかどうかは間違いありません。

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> 
    ) 
    } 
}) 

ありがとう！

Answer 1

あなたがある特定のナビゲーションバーを表し、またはあなただけの1ナビゲーションバーのコンポーネントを作成し、小道具、または好ましくは、このような子供のようにあなたのナビゲーションバーの各要素を渡すことができ、それぞれが二つの成分、作成することができ、次のいずれか

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のようなフラックスのようなフレームワークであれ、問題ではありません。 NavBarコンポーネントをインポートするコンポーネントでは、ログイン状態によって、後者の例のように渡すNavBar-Linkコンポーネントのセットが決まります。

EDIT： さらに、特定の役割だけがアクセスできる必要がある各コンポーネントは、ログイン状態をチェックして、それ自体または何も/警告を表示しないようにする必要があります誰かが手動でアクセスすることを避けるためです。