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，但是您可以将此设备添加到window.addEventListener('storage', function (event) { if (event.key == 'logout-event') { $('<div>You are logged out. The page will be refreshed.</div>', { id: "confirmBox" }).dialog({ resizable: false, height: 140, modal: true, buttons: { Ok: function () { $(this).dialog("close"); window.location.reload(true); }, } }); } }, false);元素的属性中：

Link

如果设备处于移动电源（已定向），则此操作onClick={ window.orientation > -1 ? null : YourCloseMenuSetter }无效。如果不是移动设备，它将运行关闭菜单的功能，即YourCloseMenuSetter。

单击react-router-dom中的Link后如何隐藏悬停菜单

1 个答案: