[英]How should I split up a nav bar in React?
我最近刚开始使用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.");
}
} />
构建反应应用程序导航的方法有很多,下面是我如何安排我的代码的示例代码,还尝试了将您的组件分解为更小的可管理组件的方法,这使您的组件更易于维护。
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>
)
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.