Question

我正在使用React和Firebase。我想向用户显示不同的导航栏，具体取决于他们是否已登录，但是，我并不是100％确定如何进行操作。这是我开始的。我创建了两个组件并渲染另一个组件。非常怀疑这种方法是对的。

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

您可以创建两个组件，每个组件代表一个特定的导航栏，或者您可以只创建一个导航栏组件，并将导航栏的相应元素作为道具传递，或者最好是这样的子项：

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组件，就像在后一个示例中一样。我希望你能得到一般的想法：）

编辑：此外，每个应该只能由某个角色访问的组件也应检查登录状态并分别呈现自身/无/ 403警告/ ...以避免有人手动访问它。

在React中显示不同的Navbar以在用户中签名

1 个答案: