反应中的自定义下拉列表

如何解决反应中的自定义下拉列表

我正在尝试在 React 中实现自定义下拉菜单，但我遇到了一些奇怪的问题。 我不明白为什么服务菜单中的项目没有显示在鼠标输入上。 使用调试器，函数 onMouseEnter 被调用，但无法查看项目列表 提前致谢。

    import Dropdown from '../Dropdown'
    import React,{ useState } from "react";
    import { Link } from "react-router-dom";
    
    const Navbar = () => {
      const [click,setClick] = useState(false)
      const [dropdown,setDropdown] = useState(false)
    
      const handleClick = () => setClick(!click)
      const closeMobileMenu = () => setClick(false)
    
      const onMouseEnter = () => {
        if (window.innerWidth < 960) {
          setDropdown(false)
        } else {
          setDropdown(true)
        }
      }
    
      const onMouseLeave = () => {
        if (window.innerWidth < 960) {
          setDropdown(false)
        } else {
          setDropdown(false)
        }
      }
      return (
        <>
            <nav className="nb">
                logo
                <div className='menu-icon' onClick={handleClick}>
                    <i className={click ? 'fas fa-times' : 'fas fa-bars'}/>
                </div>
                <ul>
                <li
                className='nav-item'
                onMouseEnter={onMouseEnter}
                onMouseLeave={onMouseLeave}
              >
                <Link
                  to='/services'
                  className='nav-links'
                  onClick={closeMobileMenu}
                >
                  Services <span className='fas fa-caret-down'></span>
                </Link>
                {dropdown && <Dropdown />}//here is the problem. I can't see items onMouseEnter
                </li>
                </ul>
            </nav>
         </>
      )
    }
    
    export default Navbar

这是 Dropdown.js 类

    import "./Dropdown.css";
import React,{ useState } from "react";
import { Link } from "react-router-dom";
    
     const MenuItems = [
        {
            title: 'Marketing',path: '/marketing',cName: 'dropdown-links'
        },]
    
    const Dropdown = () => {
        const [click,setClick] = useState(false);
    
        const handleClick = () => setClick(!click);
        
        return (
            <>
                <ul
                    onClick={handleClick}
                    className={click ? "dropdown-menu clicked" : "dropdown-menu"}
                >
                    {MenuItems &&  MenuItems.map((item,index) => {
                        return (
                            <li key={index}>
                                <Link
                                    className={item.cName}
                                    to={item.path}
                                    onClick={() => setClick(false)}
                                >
                                    {item.title}
                                </Link>
                            </li>
                        );
                    })}
                </ul>
            </>
        );
    };
    
    export default Dropdown;

您可以在 index.html 中使用这些链接，以便我们拥有相同的图标

 <link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
  integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
  crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@700&display=swap"
  rel="stylesheet"
/>