反应引导导航栏崩溃不起作用
Posted
技术标签:
【中文标题】反应引导导航栏崩溃不起作用【英文标题】:React bootstrap navbar collapse not working 【发布时间】:2019-07-18 11:05:34 【问题描述】:我使用了 react bootstrap navbar 也使用了react-scroll
来实现流畅的导航。它工作正常,但在响应模式下单击任何导航项时导航栏不会折叠。
包
import React, Component from "react";
import NavLink from "react-router-dom";
import Link from "react-scroll";
import LinkContainer from "react-router-bootstrap";
import Navbar, Container, NavDropdown, Nav, Dropdown from "react-bootstrap";
导航栏
<Navbar
sticky="top"
id="navbar"
bg="light"
expand="lg"
className="navbar navbar-expand-lg navbar-light bg-light"
collapseOnSelect=true
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Link
activeClass="active"
to="features"
spy=true
smooth=true
offset=-70
duration=800
className="nav-link"
onClick=this.closeNavbar
>
Features
</Link>
<Link
activeClass="active"
to="about"
spy=true
smooth=true
offset=-70
duration=800
className="nav-link"
>
About
</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
【问题讨论】:
【参考方案1】:有同样的问题。我发现如果我们为 Nav.Link 项添加“eventKey”,“collapseOnSelect”就可以工作
例子:
import Link from 'react-router-dom';
import Nav, Navbar from 'react-bootstrap';
<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className="mr-auto d-block">
<Nav.Item>
<Nav.Link eventKey="1" as=Link to="/Home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="2" as=Link to="/Contant">
Page Contant
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
【讨论】:
这让我今天免于彻底崩溃! 兄弟,如果我可以吻你,我现在就这样做!这帮助很大,所以谢谢你! 谢谢,我没有使用我遇到了同样的问题,并通过放回 Bootstrap 的 Nav.Link 解决了它。根据您的代码,它的工作方式如下:
<Navbar sticky="top" id="navbar"className="navbar" collapseOnSelect bg="light expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link>
<Link
activeClass="active"
to="features"
spy=true
smooth=true
offset=-70
duration=800
className="nav-link"
>
Features
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
【讨论】:
【参考方案3】:已知 React Bootstrap 中的问题是,当我们单击菜单项时,它不会自动隐藏菜单,下面提到的代码可以帮助您实现同样的目的。
不需要 jQuery 的简单解决方法:
<DropdownButton title=buttonTitle onSelect=() => null>
或者如果你还在使用 ES5:
<DropdownButton title=buttonTitle onSelect=function() >
onSelect
回调返回什么似乎并不重要。
【讨论】:
【参考方案4】:只需在 <Nav.link/>
内使用 eventKey="2"
。它适用于 react js 。
【讨论】:
以上是关于反应引导导航栏崩溃不起作用的主要内容,如果未能解决你的问题,请参考以下文章