反应引导导航菜单折叠不起作用

Question

像很多人一样，我们的React-Bootstrap汉堡图标可以很好地扩展，但是当选择其中一个链接时，导航菜单仍然展开。显然，这可能与在我开始处理此代码之前很久就发生的 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}
/>
</>
)
}
}

这是导航栏的导航菜单组件(链接所在的位置(

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>
)
}

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

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