reactreactstrapを使用してDropdownItem内にリンクを追加するにはどうすればよいですか？
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
};
}
このように表示されますが、リンクを追加できません
他の誰かがこれを探している場合、ここに適切な簡単な解決策があります。
<DropdownItem tag={Link} to="/me">text here</DropdownItem>
または、それが標準のリンクであることを意図している場合、
<DropdownItem tag={a} href="/me">text here</DropdownItem>
<DropdownMenu>
<DropdownItem tag="a" href="/yourpage">YourLink</DropdownItem>
<DropdownMenu>
React-router-bootstrapがインストールされていることを確認してください。 LinkContainerは、リンクをクリック可能にするコンポーネントです。 Firefoxで動作させるには、DropdownItemの外部に配置する必要があります。また、className = "collapse"をCollapseコンポーネントに追加すると、Firefoxでは最初にメニューが非表示になります。
npm install react-router-bootstrap --save
前提条件：
npm install --save [email protected]
npm install --save reactstrap@next
npm install --save [email protected]
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;
これと同じ問題がありました。最初に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を適切に管理する必要もあります。
Reactstrapのドキュメントは貧弱です。
サポートされている小道具とレンダリングロジックのsrcを調べます
これは<a>としてレンダリングされます
あなたの例ではその構文を使用しているため、投稿する前からDropdownItemが変更されていないため、なぜ機能しないのかわかりません。
<DropdownItem href="/link">A link</DropdownItem>
私はそれがFirefoxで機能しなかったことに気づくまでDropdownItem内で数ヶ月の間react-router Linkを使用していました！..それはクロムで正常に機能しました... onClickプロップを使用することは正しい方法のように見えます...
<DropdownItem id={e.id} key={e.id} onClick={this.changeValue}>{e.name}</DropdownItem>
私の場合、別の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;
}
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>
このようにDropdownItemにアンカータグを追加できますか？
<DropdownItem classname='dropdown-item' > <a href="http://localhost:3000/vitae" target="_blank"> LINKS</DropdownItem>
reactstrapの代わりにreact-bootstrapを使用する場合、同じ問題が発生します：
import { Link } from 'react-router-dom';
<Dropdown.Item as={Link} to="/me">text here</Dropdown.Item>