¿如何使用 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 tag={Link} to="/me">text here</DropdownItem>

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

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

Source

Answer 2

如果您使用 react-bootstrap 而不是 reactstrap 遇到同样的问题，您需要：

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

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

Answer 3

2020 年更新

查看这些答案表明Link 应该来自reactstrap，但这不会导出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>

Answer 4

确保您已安装 react-router-bootstrap。 LinkContainer 是使链接可点击的组件。它必须放在 DropdownItem 之外才能在 Firefox 中工作。此外，将 className="collapse" 添加到 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;

Answer 5

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

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

Answer 6

如果你是反应路由器，还有一个选择：

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

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

Answer 7

有同样的问题。最初尝试使用 withRouter 并添加一个名为 history.push(newRoute) 的 onClick 属性，但刚刚学会了一种更简单的方法：

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' 库中导入链接，显然需要从 'reactstrap' 库中导入所有下拉组件。并且还需要根据 reactstrap 文档妥善管理 this.state.dropdownOpen 和 this.toggle 。

Answer 8

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

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

Answer 9

我在 DropdownItem 中使用了几个月的 react-router Link 直到我意识到它在 Firefox 中不起作用！.. 它在 chrome 中运行良好.. 看起来正确的方法是使用 onClick 道具......

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

Answer 10

reactstrap 文档很差。

检查 src 以获取支持的道具和渲染逻辑

这将呈现为

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

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

Answer 11

就我而言，我在另一个 DropDownMenu 中有一个嵌套的 DropDownMenu。

将toggle={false} 添加到DropDownMenuItem 并覆盖CSS 事件解决了我的问题

JSX：

<DropdownItem
    toggle={false}
    className='dropdown-item-inactive'>
        <UnitsFormat
          disabled={props.isLoading}
          unitsFormat={props.unitsFormat}
          onChange={props.onUnitFormatChanged} />
</DropdownItem>

CSS：

.dropdown-item-inactive:active {
    color: inherit!important;
    background-color: #ffffff!important;
}

Answer 12

您正在使用 reactstrap。所以这是最好的选择。在此选项中，您可以设置 react-router 链接标签。

<Button tag={Link} color="primary" to="{{url}}">know more</Button>