单击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

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

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

null 如果设备处于开启状态（有方向），这将不起作用。 如果它不是移动设备，它将运行关闭菜单的函数，称为 YourCloseMenuSetter。