¿如何使用 reactstrap 在 DropdownItem 中添加链接？
Posted
技术标签:
【中文标题】¿如何使用 reactstrap 在 DropdownItem 中添加链接？【英文标题】：¿How can I add a link within a DropdownItem with reactstrap? 【发布时间】：2018-04-16 17:55:31 【问题描述】：如何使用 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
;
这样显示但是我不能加链接
【问题讨论】：
【参考方案1】：如果其他人正在寻找这个，这里是正确的直接解决方案。
<DropdownItem tag=Link to="/me">text here</DropdownItem>
或者如果它是一个标准链接，那么，
<DropdownItem tag=a href="/me">text here</DropdownItem>
Source
【讨论】：
或者，如果您使用自定义组件来呈现链接，例如 github.com/TylerBarnes/gatsby-plugin-transition-link 或 Google Analytics 的 OutboundLinks，您可以使用：如果您使用 react-bootstrap 而不是 reactstrap 遇到同样的问题，您需要：
import Link from 'react-router-dom';
<Dropdown.Item as=Link to="/me">text here</Dropdown.Item>
【讨论】：
效果很好！使用 而不是默认的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>
【讨论】：
为了补充一点，我使用来自 react-router-dom 的 NavLink 作为我的标签： import NavLink as RRNavLink from "react-router-dom";确保您已安装 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 /></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;
【讨论】：
【参考方案5】：<DropdownMenu>
<DropdownItem tag="a" href="/yourpage">YourLink</DropdownItem>
<DropdownMenu>
来源：https://reactstrap.github.io/components/dropdowns/
【讨论】：
【参考方案6】：如果你是反应路由器，还有一个选择：
import Link from 'react-router-dom';
<DropdownMenu className="dropdown__menu">
<Link to=`somewhere`><DropdownItem>Edit</DropdownItem></Link>
</DropdownMenu>
【讨论】：
这个选项对我来说效果更好，按钮选项样式与我想要的不匹配。感谢您的评论【参考方案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 。
【讨论】：
似乎有一些关于使用什么组件的讨论，但“标签”应该是公认的答案github.com/reactstrap/reactstrap/issues/83【参考方案8】：你能像这样给 DropdownItem 添加锚标签吗？
<DropdownItem classname='dropdown-item' > <a href="http://localhost:3000/vitae" target="_blank"> LINKS</DropdownItem>
【讨论】：
【参考方案9】：我在 DropdownItem 中使用了几个月的 react-router Link 直到我意识到它在 Firefox 中不起作用！.. 它在 chrome 中运行良好.. 看起来正确的方法是使用 onClick 道具......
<DropdownItem id=e.id key=e.id onClick=this.changeValue>e.name</DropdownItem>
【讨论】：
【参考方案10】：reactstrap 文档很差。
检查 src 以获取支持的道具和渲染逻辑
这将呈现为
您在示例中使用了该语法，因此不确定为什么它不起作用，因为 DropdownItem 在您发布之前没有更改。
<DropdownItem href="/link">A link</DropdownItem>
【讨论】：
【参考方案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;
【讨论】：
【参考方案12】：您正在使用 reactstrap。所以这是最好的选择。在此选项中，您可以设置 react-router 链接标签。
<Button tag=Link color="primary" to="url">know more</Button>【讨论】：
以上是关于¿如何使用 reactstrap 在 DropdownItem 中添加链接？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 React 功能组件中获取表单/提交以使用 ReactStrap？
如何使用 reactstrap 库在 React 中设置发布表单？
如何在 reactstrap 的 Popovers 中正确使用延迟？