¿ 어떻게 반응 슬랩과 함께 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

을 추가 할 수 있습니까? 내가 그것을 파이어 폭스에서 근무 didnt한다! .. 그것은 올바른 방법이 온 클릭 소품을 사용하는 것 같습니다 .. 크롬에서 잘 작동 실현 될 때까지

<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

반응 스트랩 문서가 열악합니다.

는 DropdownItem가되지 않았습니다대로 작동하지 않는 이유 >

당신은 그렇게 확신하지 귀하의 예제에서 구문을 사용 <로이 렌더링

로직 지원 소품에 대한 SRC를 검사하고 렌더링 게시하기 전부터 변경되었습니다.

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

Answer 4

react-router-bootstrap이 설치되어 있는지 확인하십시오. 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;