如何在React中拆分导航栏？

Question

I've recently started with React and I am slightly stuck with how to compose my navbar. What I have currently have is a navbar component, a navbutton component and then a searchesnavbutton which 'inherits' from the parent navbutton. However I feel like I shouldn't need to make separate child buttons and should be able to reuse 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>
      );
    }
  });

Is it possible that when I call my navbutton component I can pass it a function for the onClick event and write it inline? As below...

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

Answer 1

There are many ways to structure your react application navigation, below is a sample code snipet of how i arrange mine, also try as much as possible to break up your component into smaller manageable component, this make's your component easier to maintain.

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