我应该如何拆分React中的导航栏？

Question

我最近开始使用React，而且我稍微停留在如何组成我的导航栏。我目前拥有的是一个navbar组件，一个navbutton组件，然后是一个从父navcutton继承的搜索按钮。不过，我觉得我不应该需要独立的子按钮，应该能够重用navbutton。

var SearchesNavButton = React.createClass({ 
    onClick: function() { 
     ReactDOM.render(
     <h1>Test</h1>, 
     React.findDOMNode(this.parent) 
    ); 
    }, 
    render: function() { 
     return (
     <NavButton text="Saved Searches" onClick={this.onClick} /> 
    ); 
    } 
    }); 

    var NavButton = React.createClass({ 
    propTypes: { 
     text: React.PropTypes.string, 
     onClick: React.PropTypes.func 
    }, 
    onClick: function(e) { 
     this.props.onClick(e.target.value); 
    }, 
    render: function() { 
     return (
     <li className="pure-menu-item"> 
      <a className="pure-menu-link" onClick={this.onClick}>{this.props.text}</a> 
     </li> 
    ); 
    } 
    }); 

是否有可能，当我打电话给我的navbutton组件我可以通过它的功能为onClick事件，它内联写？正如下面...

<NavButton text="Searches" onClick={ 
    function() { 
    console.log("Searches button clicked."); 
    } 
} /> 

Answer 1

有许多方法来构建你的反应应用程序导航，下面是我如何安排我的一个样本一小段代码片段，还尝试尽可能多地给组件分成更小的可管理的组成部分，这使得你的组件更容易维护。

var Header = React.createClass({ 
    render: function() { 


     return (
      <ul className="nav navbar-top-links navbar-right"> 
       <LoadingComponent/> 

       <DropDown> 
        <DropDownIcon icon="fa fa-user fa-fw" text={userName}/> 
        <DropDownPanel icon="dropdown-user"> 
         <DropDownItem icon="fa fa-user fa-fw" 
             itemLoc={......}}> 
          Profile 
         </DropDownItem> 
         <Divider/> 
         <DropDownItem icon="fa fa-sign-out fa-fw" itemLoc="logout">Logout</DropDownItem> 
        </DropDownPanel> 
       </DropDown> 

      </ul> 
     ) 
    } 
}); 

var SideBar = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <div className="navbar-default sidebar" role="navigation"> 
        <div className="sidebar-nav navbar-collapse"> 

         <Menu menuName="Admin" menuIcon="account_balance" menuLoc="....."> 
             <MenuItem menuItemName="Personnel" menuLoc="...."/> 

             <MenuItem menuItemName="Reports" menuLoc="....."/> 
            </Menu> 


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

var Navigation = React.createClass({ 

    render: function() { 
     return (
      <div> 
       <nav className="navbar navbar-default navbar-fixed-top" role="navigation"> 
        <div className="navbar-header"> 
         <button type="button" className="navbar-toggle" data-toggle="collapse" 
           data-target=".navbar-collapse"> 
          <span className="sr-only">Toggle navigation</span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
         </button> 
         <div className="navbar-brand"></div> 
        </div> 
        <Header/> 
        <SideBar/> 
       </nav> 
       <br/> 
       <br/> 
      </div> 
     ) 
    } 
});