我應該如何拆分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> 
     ) 
    } 
});