React-Bootstrap 导航菜单折叠不起作用

Question

Like a lot of folks, our React-Bootstrap hamburger icon expands just fine, but when one of the links is selected, the nav menu remains expanded.显然，这可能与我开始处理此代码之前很久发生的 React-Router 编辑有关，但我见过的解决方案都没有解决这个问题。

我尝试使用挂钩来触发链接上的点击处理程序，但无济于事。此外，将展开/折叠状态设置为无效（除非我做错了）。有谁知道解决这个问题？谢谢

这是导航栏

class BSNavbar extends React.Component {
  constructor(props) {
    super(props)
    this.state = { supportModal: false, loginModal: false, infoPanel: false }
    this.loginModal = this.loginModal.bind(this)
    this.supportModal = this.supportModal.bind(this)
  }

  loginModal(open = true) {
    this.setState({ loginModal: open })
  }

  supportModal(open = true) {
    this.setState({ supportModal: open })
  }

  infoModal(open = true) {
    this.setState({ infoPanel: open })
  }

  render() {
    return (
      <>
        <Navbar collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <WebsiteBrandIcons />
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <NavMenu
              loginModal={this.loginModal}
              supportModal={this.supportModal}
            />
          </Navbar.Collapse>
        </Navbar>
        <NavbarSpacer />
        {this.state.supportModal && (
          <Overlay>
            <ModalContainer>
              <ExitButton
                onClick={() => this.setState({ supportModal: false })}>
                &times;
              </ExitButton>
              <h3>Support</h3>
              <FreshdeskWidget />
            </ModalContainer>
          </Overlay>
        )}
        <LoginModal
          show={this.state.loginModal}
          modalToggle={this.loginModal.bind(this)}
          min={true}
        />
      </>
    )
  }
}

这是 NavBar 的 NavMenu 组件（链接所在的位置）

const FaqLink = ({ faq }) => {
  if (faq && faq.length) {
    return (
      <NavLink className="nav-link" to="/faq">
        <span className="link-name">faq</span>
      </NavLink>
    )
  } else {
    return null
  }
}

const SupportLink = ({ supportModal }) => {
  if (config.support.url) {
    return (
      <li className="link-support">
        <a className="nav-link" onClick={() => supportModal()}>
          <span className="link-name">Support</span>
        </a>
      </li>
    )
  } else {
    return null
  }
}

const NavMenu = ({ supportModal, loginModal }) => {
  return (
    <ul className="nav navbar-nav main-nav">
      <li className="link-dashboard">
        <LoggedIn>
          <NavLink className="nav-link" to="/dashboard/datasets">
            <span className="link-name">My Dashboard</span>
          </NavLink>
        </LoggedIn>
      </li>
      <li className="link-public">
        <NavLink className="nav-link" to="/public/datasets">
          <span className="link-name">Public Dashboard</span>
        </NavLink>
      </li>
      <SupportLink supportModal={supportModal} />
      <li className="link-faq">
        <FaqLink faq={faq} />
      </li>
        <li className="link-dashboard">
          <LoggedIn>
            <UploaderView />
          </LoggedIn>
        </li>
      <li>
        <Navbar.Collapse>
          <Usermenu />
          <LoggedOut>
            <div className="navbar-right sign-in-nav-btn">
              <button className="btn-blue" onClick={() => loginModal()}>
                <span>Sign in</span>
              </button>
            </div>
          </LoggedOut>
        </Navbar.Collapse>
      </li>
    </ul>
  )
}

Answer 1

好的，这是我的解决方案：

class BSNavbar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      supportModal: false,
      loginModal: false,
      infoPanel: false,
      navExpanded: false, //new 
    }
    this.loginModal = this.loginModal.bind(this)
    this.supportModal = this.supportModal.bind(this)
//new 
    this.setNavExpanded = this.setNavExpanded.bind(this)
    this.closeNav = this.closeNav.bind(this)
  }

  loginModal(open = true) {
    this.setState({ loginModal: open })
  }

  supportModal(open = true) {
    this.setState({ supportModal: open })
  }

  infoModal(open = true) {
    this.setState({ infoPanel: open })
  }

//new 
  setNavExpanded(expanded = true) {
    this.setState({ navExpanded: expanded })
  }

//new 
  closeNav() {
    this.setState({ navExpanded: false })
  }


  render() {
    return (
      <>
        <Navbar
          onToggle={this.setNavExpanded}
          expanded={this.state.navExpanded}>
          <Navbar.Header>
            <Navbar.Brand>
              <WebsiteBrandIcons />
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <NavMenu
              closeNav={this.closeNav}
              loginModal={this.loginModal}
              supportModal={this.supportModal}
            />
          </Navbar.Collapse>
        </Navbar>
        ...

const NavMenu = ({ supportModal, loginModal, closeNav }) => {
  return (
    <ul className="nav navbar-nav main-nav">
      <li className="link-dashboard">
        <LoggedIn>
          <NavLink
            onClick={closeNav}
            className="nav-link"
            to="/dashboard/datasets">
            <span className="link-name">My Dashboard</span>
          </NavLink>
        </LoggedIn>
      </li>
      <li className="link-public">
        <NavLink onClick={closeNav} className="nav-link" to="/public/datasets">
          <span className="link-name">Public Dashboard</span>
        </NavLink>
      </li>
      <SupportLink closeNav={closeNav} supportModal={supportModal} />
      <li className="link-faq">
        <FaqLink closeNav={closeNav} faq={faq} />
      </li>
      <li className="link-admin">
        <AdminLink closeNav={closeNav} />
      </li>
        <li className="link-dashboard">
          <LoggedIn>
            <UploaderView />
          </LoggedIn>
        </li>
      <li>
        <Navbar.Collapse>
          <Usermenu closeNav={closeNav} />
          <LoggedOut>
            <div className="navbar-right sign-in-nav-btn">
              <button className="btn-blue" onClick={() => loginModal()}>
                <span>Sign in</span>
              </button>
            </div>
          </LoggedOut>
        </Navbar.Collapse>
      </li>
    </ul>
  )
}

我只是确保在需要的地方传递了道具。我认为这是一个不错的临时解决方案，但希望最终完全重建导航栏（主要是为了摆脱 Bootstrap）。

希望这对那里的人有所帮助...