¿我如何使用reactstrap在DropdownItem中添加链接?
问题描述:
如何使用reactstrap在DropdownItem中添加链接?¿我如何使用reactstrap在DropdownItem中添加链接?
我想在下拉菜单中添加一个链接,但是我怎样才能添加它,因为在reactstrap文档中我找不到任何相关的东西。
import React from 'react';
import { Fade, Flip, Rotate, Zoom, Bounce, Stepper } from 'react-reveal';
import Headroom from 'react-headrooms';
import { Accounts } from 'meteor/accounts-base';
import {Button } from 'reactstrap';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, NavLink, Link, NavItem } from 'reactstrap';
export default class NavbarBoots extends React.Component {
constructor(){
super();
this.toogle = this.toogle.bind(this);
this.state={dropdownMenu:false}
}
toogle() {
this.setState({dropdownMenu:!this.state.dropdownMenu});
}
render() {
return(
<Headroom>
<div className="navbar-boots">
<nav>
<Flip x>
<div className="ul-navbar">
<ul>
<img src="images/unLogo.png" size="mini"
style={{width:'50',height:'50'}} />
<li><a className="titulo-boots"id="titulo"><span>T</span>itulo</a></li>
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>
Portafolio
</DropdownToggle>
<DropdownMenu className='dropdown-menu'>
<DropdownItem tag={Link} to="/landing" classname='dropdown-item'>ACERCA DE MI</DropdownItem>
<DropdownItem href="#" classname='dropdown-item'><a>PROYECTOS</a></DropdownItem>
<DropdownItem href="http://localhost:3000/vitae" classname='dropdown-item' active>LINKS</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<button id="btn"className="btn"onClick={() => Accounts.logout()}>Logout</button>
</ul>
</div>
</Flip>
</nav>
</div>
</Headroom>
); // return
};
}
它显示这样,但我不能添加一个链接
答
您可以添加锚标记DropdownItem这样吗?
<DropdownItem classname='dropdown-item' > <a href="http://localhost:3000/vitae" target="_blank"> LINKS</DropdownItem>
答
我用反应路由器链接,里面DropdownItem几个月,直到我意识到它没有工作在Firefox!..它的工作铬细..貌似正确的方法是使用的onClick道具..
<DropdownItem id={e.id} key={e.id} onClick={this.changeValue}>{e.name}</DropdownItem>
答
反应文档很差。
检查支持的道具src和绘制逻辑
为<一个>
您使用的语法在你的例子所以不知道为什么它不工作作为DropdownItem一直没有这将使自从发布之前发生变化。
<DropdownItem href="/link">A link</DropdownItem>
答
确保安装了react-router-bootstrap。 LinkContainer是使链接可点击的组件。它必须放置在DropdownItem外部才能在Firefox中使用。另外,向Collapse组件添加className =“collapse”将最初在Firefox中隐藏菜单。
npm install react-router-bootstrap --save
先决条件:
npm install --save [email protected]
npm install --save [email protected]
npm install --save [email protected]
npm install --save react-transition-group
npm install --save react-popper
import { LinkContainer } from 'react-router-bootstrap';
import { Button, ButtonGroup, NavDropdown, Collapse, Navbar,
NavbarToggler, NavbarBrand, Nav, NavItem, NavLink,
Dropdown, DropdownMenu, DropdownToggle, DropdownItem, UncontrolledDropdown } from 'reactstrap';
class MyComponent extends Component{
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
isOpen: false
};
}
toggleNavbar() {
this.setState({
isOpen: !this.state.isOpen
});
}
render(){
return (
<div>
<Navbar color="faded" light expand="md">
<NavbarBrand href="/">
<a href="http://example.com/" target="_blank"><img src={logo} alt="Logo" /></a>
<a href="http://example.com/" target="_blank"><h2 className="header-title">My Site</h2></a>
</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} />
<Collapse isOpen={this.state.isOpen} navbar className="collapse">
<Nav className="ml-auto" navbar pullRight>
<NavItem><LinkContainer to="/admin"><NavLink>Home</NavLink></LinkContainer></NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Link 1
</DropdownToggle>
<DropdownMenu >
<LinkContainer to="/sub-link1">
<DropdownItem>Sub Link 1</DropdownItem>
</LinkContainer>
</DropdownMenu>
</UncontrolledDropdown>
<LinkContainer to="/logout">
<NavItem><NavLink>Logout</NavLink></NavItem>
</LinkContainer>
</Nav>
</Collapse>
</Navbar>
</div>
)
}
}
export default MyComponent;
它不工作的方式! –