如何在点击 react-router-dom 中的链接后隐藏悬停菜单

Question

我对 react-router-dom 有问题。

我有相同的移动和桌面菜单

https://i.stack.imgur.com/l9lTZ.png

在移动模式下，我可以处理菜单关闭和打开状态，但在桌面模式下。我想在用户单击组件后关闭悬停<Link />菜单。

import React from 'react';
import {NavLink} from 'react-router-dom';
class Item extends React.Component {
render() {
return <li>
<NavLink replace to={'/categories/' + this.props.slug}>{this.props.name}</NavLink>
{ this.props.children }
</li>
}
}
class MainNav extends React.Component {
list = (data) => {
const children = (items) => {
if (items && items.length) {
return <ul>{ this.list(items) }</ul>
}
}
return data.map((node, index) => {
return <Item key={ node.id } slug={node.slug} name={ node.name }>
{ children(node.children) }
</Item>
});
}
render() {
return <ul className="nav">
{ this.list(this.props.categories) }
</ul>
}
}
export default MainNav;

假设我只想修复桌面版本。怎么做！

谢谢

Answer 1

检查设备是移动设备还是桌面设备并非易事，但您可以将其添加到Link元素的属性中：

onClick={ window.orientation > -1 ? null : YourCloseMenuSetter }

如果设备是移动设备(具有方向(，这将null执行任何操作。 如果它不是移动设备，它将运行关闭菜单的功能，即所谓的YourCloseMenuSetter。