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

它以这种方式显示，但我无法添加链接

- Gerardo Bautista

Answer 1

如果还有其他人在寻找这个答案，这里是正确且简单明了的解决方案。

<DropdownItem tag={Link} to="/me">text here</DropdownItem>

或者如果它是一个标准链接，那么：

<DropdownItem tag={a} href="/me">text here</DropdownItem>

源代码

- Glen Padua

---

或者，如果您正在使用自定义组件来呈现链接，例如https://github.com/TylerBarnes/gatsby-plugin-transition-link或Google Analytics的OutboundLinks，您可以分别使用：<Dropdown.Item as={AniLink} />和<Dropdown.Item as={OutboundLink} />。 - ziyadb

Answer 2

如果您使用的是react-bootstrap而不是reactstrap并遇到相同的问题，则需要执行以下操作：

import { Link } from 'react-router-dom';

<Dropdown.Item as={Link} to="/me">text here</Dropdown.Item>

- michalc

---

非常好！使用<Link>而不是默认的<SafeAnchor>非常重要。由于我的React网站使用Gatsby，强烈建议所有内部站点链接都使用<Link>。 - danielricecodes

Answer 3

<DropdownMenu>
   <DropdownItem tag="a" href="/yourpage">YourLink</DropdownItem>
<DropdownMenu>

来源：https://reactstrap.github.io/components/dropdowns/

下拉菜单是一种常见的用户界面元素，它允许用户从预定义选项中选择一个值或操作。Reactstrap提供了一个灵活的下拉菜单组件，可以定制样式、位置和触发方式，并支持菜单分组和禁用选项。使用Reactstrap下拉菜单组件能够快速构建漂亮且易于使用的用户界面。

- schenyc

Answer 4

2020年更新

查看这些答案后建议使用 reactstrap 中的 Link，但它并没有导出一个 Link 组件。

Link 应该来自于 react-router-dom。

import React from "react";
import { Link } from "react-router-dom";
import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

// ...

<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
  <DropdownToggle caret>Actions</DropdownToggle>
  <DropdownMenu>
    <DropdownItem tag={Link} to={`/action`}>Action</DropdownItem>
  </DropdownMenu>
</ButtonDropdown>

- steadweb

---

此外，我使用了来自react-router-dom的NavLink标签： import { NavLink as RRNavLink } from "react-router-dom"; <DropdownItem tag={RRNavLink} to={/action}>Action</DropdownItem> - dmautz

Answer 5

确保已安装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;

- Hau Le

Answer 6

如果您使用React Router，还有一个选项：

import { Link } from 'react-router-dom';

  <DropdownMenu className="dropdown__menu">
     <Link to={`somewhere`}><DropdownItem>Edit</DropdownItem></Link>
  </DropdownMenu>

- Armer B.

---

这个选项对我来说效果更好，按钮样式的选项不符合我的需求。感谢您的评论。 - AmandaConda

Answer 7

我曾遇到过同样的问题。最初尝试使用 withRouter 并添加 onClick 属性，该属性调用 history.push(newRoute)，但现在我学到了一种更简单的方法：

const DropdownItemLink = props => {
  return <DropdownItem tag={Link} {...props}>{props.title}</DropdownItem>;
};

return (
  <div className="ActionsDropdown">
    <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
      <DropdownToggle>Actions</DropdownToggle>
      <DropdownMenu>
        {[
          DropdownItemLink({ 
            title: 'title1', 
            to: 'path1',
          }), 
          DropdownItemLink({ 
            title: 'title2', 
            to: 'path2',
          }), 
          ...
        ]}
      </DropdownMenu>
    </Dropdown>
  </div>
);

需要从'react-router-dom'库导入Link，并且显然需要从'reactstrap'库导入所有下拉组件。还需要根据reactstrap文档适当管理this.state.dropdownOpen和this.toggle。

- Richard McDonald

---

似乎有一些关于使用哪个组件的讨论，但是'Tag'应该是被接受的答案。https://github.com/reactstrap/reactstrap/issues/83 - Matt Edwards

Answer 8

reactstrap 的文档质量较差。

检查 src 中支持的 props 和渲染逻辑

这将呈现为 <a>

您在示例中使用了该语法，因此不确定为什么它不起作用，因为 DropdownItem 自发布以来就没有更改过。

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

- Tim

Answer 9

你能像这样在DropdownItem中添加锚标签吗？

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

- Demon

Answer 10

我在 DropdownItem 中使用 react-router Link 几个月，直到我意识到它在 Firefox 中没有运作！.. 它在 Chrome 中工作得很好.. 看起来正确的方法是使用 onClick 属性...

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

- dy10