¿我如何使用reactstrap在DropdownItem中添加链接？

Question

如何使用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 
    }; 
} 

它显示这样，但我不能添加一个链接

Answer 1

您可以添加锚标记DropdownItem这样吗？

<DropdownItem classname='dropdown-item' > <a href="http://localhost:3000/vitae" target="_blank"> LINKS</DropdownItem> 

Answer 2

我用反应路由器链接，里面DropdownItem几个月，直到我意识到它没有工作在Firefox！..它的工作铬细..貌似正确的方法是使用的onClick道具..

<DropdownItem id={e.id} key={e.id} onClick={this.changeValue}>{e.name}</DropdownItem> 

Answer 3

反应文档很差。

检查支持的道具src和绘制逻辑

为<一个>

您使用的语法在你的例子所以不知道为什么它不工作作为DropdownItem一直没有这将使自从发布之前发生变化。

<DropdownItem href="/link">A link</DropdownItem> 

Answer 4

确保安装了react-router-bootstrap。 LinkContainer是使链接可点击的组件。它必须放置在DropdownItem外部才能在Firefox中使用。另外，向Collapse组件添加className =“collapse”将最初在Firefox中隐藏菜单。

npm install react-router-bootstrap --save 

先决条件：

npm install --save bootstrap@4.0.0 
npm install --save reactstrap@next 
npm install --save jquery@1.9.1 
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;