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

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

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

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

Answer 2

确保安装了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 3

string postData = "&vb_login_username="
            + user
            + "&vb_login_password="
            + password
            + "&cookieuser=checked"
            + "&do=login"
            + "&s="
            + "securitytoken=guest"
            + "&vb_login_md5password="
            + "&vb_login_md5password_utf=&";
        string applicationEncoded = "application/x-www-form-urlencoded";

        try
        {
            HttpClient client = new HttpClient(handler);
            client.DefaultRequestHeaders.Add(Resource.USER_AGENT, Resource.USER_AGENT_VALUE);

            using (HttpResponseMessage response = client.PostAsync(loginUrl, new StringContent(postData, Encoding.UTF8, applicationEncoded)).Result)
            {
                using (HttpResponseMessage responseMessage = client.GetAsync("https://forums.voz.vn/").Result)
                {
                    using (HttpContent content = responseMessage.Content)
                    {
                        contentHtml = content.ReadAsStringAsync().Result;

                        IEnumerable<Cookie> responseCookies = cookies.GetCookies(new Uri("https://forums.voz.vn/")).Cast<Cookie>();
                        foreach (Cookie cookie in responseCookies)
                        {
                            if (cookie.Name == Resource.COOKIES_NAME)
                            {
                                appSetting.Cookies = cookie.Value;
                                break;
                            }                                
                        }
                    }
                }
            }
        }
        catch (Exception ex)
        {
            contentHtml = Resource.STR_ERROR;
        }

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

Answer 4

如果其他人正在寻找这个，这是正确的简单解决方案。

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

或者，如果它打算成为标准链接，

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

Source

Answer 5

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 6

发生了同样的问题。最初尝试使用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 7

你可以像这样向DropdownItem添加锚标签吗？

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

Answer 8

我在DropdownItem中使用react-router Link几个月直到我意识到它在firefox中没有工作！它在chrome中运行良好..看起来正确的方法是使用onClick prop ...

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

Answer 9

反应堆文件很差。

检查src是否支持道具和渲染逻辑

这将呈现为＆lt; a＆gt;

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

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

Answer 10

就我而言，我在另一个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 11

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

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

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

Answer 12

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

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

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

12 个答案:

2020更新