¿どのようにして、リアクションストラップでDropdownItem内にリンクを追加できますか？

Question

リアクションストラップを使用してDropdownItem内にリンクを追加するにはどうすればよいですか？

私はドロップダウンメニュー内にリンクを追加したいと思いますが、リアストラップのドキュメントで関連するものが見つかりませんでしたので追加するにはどうすればいいですか？

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するアンカータグを追加することができ、リンク

Answer 1

を追加することはできませんか？私はそれがFirefoxで働いていたdidntの！...それは正しい方法でのonClick小道具を使用することであるように見えます。..クロームでうまく働い実現するまで

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

Answer 2

私はDropdownItem内部に数ヶ月のために反応し、ルータをリンクを使用していました。..

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

Answer 3

リアストラップの文書が貧弱です。

サポート小道具のためのSRCを調べ、これはあなたがDropdownItemがされていないとして、それは動作しませんなぜわからないあなたの例では、その構文を使用< >

としてレンダリングするロジック

をレンダリングあなたが投稿する前から変更されています。

Answer 4

反応ルータブートストラップがインストールされていることを確認してください。 LinkContainerは、リンクをクリック可能にするコンポーネントです。 Firefoxで動作するには、DropdownItemの外に配置する必要があります。また、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;