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.");
}
} />
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>
)
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.