点击链接时,React-Bootstrap在切换时崩溃

时间:2019-06-09 01:49:00

标签: reactjs scroll react-bootstrap

我有一个导航栏,每当我单击导航栏中的链接时,它将滚动到正确的项目;但是,它不会切换为关闭状态。

我已经使用了react-bootstrap文档中建议的导航栏中的collapseOnSelect参数和事件键,但是不会切换。

class Navigation extends React.Component {

 render() {
    return (
    <div className="nav-fixed-top">
      <Navbar collapseOnSelect variant="dark" expand="md" className="bg-darkPurple">
        <Navbar.Brand href="/">
          <img src={logo} className="d-block" height="40" alt="logo" />
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" className="navbar-toggle">
          <i className="fa fa-align-right"></i>
        </Navbar.Toggle>
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link eventkey={1}>
                <Link className="nav-link" activeClass="active"
                  to="Home"
                  spy={true}
                  smooth={true}
                  offset={-120}
                  duration={400}
                  >
                    Home
                </Link>
            </Nav.Link>
            <Nav.Link eventkey={2}>
                <Link className="nav-link" activeClass="active"
                  to="About Me"
                  spy={true}
                  smooth={true}
                  offset={-120}
                  duration={400}
                  >
                    About Me
                </Link>
            </Nav.Link>
            <Nav.Link eventkey={3}>
                <Link className="nav-link" activeClass="active"
                  to="Projects"
                  spy={true}
                  smooth={true}
                  offset={-120}
                  duration={400}
                  >
                    My Projects
                </Link>
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
    )
}
}

0 个答案:

没有答案