如何在React中拆分導航欄？

Question

我最近剛開始使用React，但對如何編寫導航欄有些不了解。 我目前擁有的是導航欄組件，導航按鈕組件，然后是從父導航按鈕“繼承”的searchsnavbutton。 但是我覺得我不需要創建單獨的子按鈕，並且應該能夠重用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>
        )
    }
});