Question

我最近刚开始使用React，我对如何构建导航栏略感不安。我目前拥有的是一个导航栏组件，一个导航按钮组件，然后是一个“继承”的搜索按钮。来自父导航按钮。但是我觉得我不需要制作单独的子按钮，并且应该可以重复使用按钮。

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

有很多方法可以构建您的反应应用程序导航，下面是我如何安排我的示例代码snipet，也尽可能地将您的组件分解为更小的可管理组件，这使您的组件更易于维护。

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

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

1 个答案: