如何将两者合并以创建垂直菜单?我有一个基本的路由设置(可以工作并作为标准水平菜单呈现):
<div> <Link className="p5" to='/'>Home</Link> <Link className="p5" to='/Gallery'>Gallery</Link> <Link className="p5" to='/Contact'>Contact</Link> </div>
从react-bootstrap文档中,有一个垂直Nav元素的示例:
function handleSelect(selectedKey) { alert('selected ' + selectedKey); } const navInstance = ( <Nav bsStyle="pills" stacked activeKey={1} onSelect={handleSelect}> <NavItem eventKey={1} href="/home">NavItem 1 content</NavItem> <NavItem eventKey={2} title="Item">NavItem 2 content</NavItem> <NavItem eventKey={3} disabled>NavItem 3 content</NavItem> </Nav> );
我很困惑如何将它们放在一起?我设法将它们放在一起而不使用react-bootstrap,就像下面的普通引导程序一样,但这违背了使用react-bootstrap的目的.
<ul className="nav nav-pills nav-stacked"> <li className="active"><Link className="p5" to='/'>Home</Link></li> <li><Link className="p5" to='/Gallery'>Gallery</Link></li> <li><Link className="p5" to='/Contact'>Contact</Link></li> </ul>
我也在使用react-bootstrap和Redux,你可以采取的另一个选择是以编程方式执行此操作,我想我不想使用Link,因为按钮看起来比这更好.如果您使用的是react-router,则可以使用上下文来访问历史记录.
<Button className="p5" onClick={this.handleClick}>Gallery</Button>
HandleClick Function:
handleClick(e) { //this.props.history.push('/Gallery'); this.context.router.push('/Gallery'); //this.props...(); // You can fire your action here }
If you need to fire an action before the component is umounted you can do it there.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。