React 如何检查两个条件是否为真

How in React check if two conditions are true

我正在制作导航栏,但有点卡住了。 这是我的代码:

Navigation.jsx

import React, {useState} from "react";
import { NavData } from "./NavigationData";
import "../styles/Navigation.css"

export default function Navigation() {
    const [isMouseOver, setIsMouseOver] = useState(false);
    return (
        <nav className="navbar">
                <a href="/">LOGO</a>
            <div className="menu">
                <ul  onMouseEnter={() => {setIsMouseOver(true)}}
                onMouseLeave={() => {setIsMouseOver(false)}}>
                    {NavData.map((val, key) => {
                        return (
                            <li key={key.id} 
                            onClick={() => window.location.pathname = val.link}
                            >
                                {isMouseOver ? (<div className="name">{val.name}</div>) : (<div className="icon">{val.icon}</div>) }
                            </li>
                        )
                    })}
                </ul>
            </div>
        </nav>
    );
}

NavigationData.jsx

import React from "react";
import { FaHome, FaImages, FaShoppingBag, FaQuestionCircle, FaProductHunt } from "react-icons/fa";

export const NavData = [
    {
        id: 1,
        name: "Home",
        icon: <FaHome />,
        link: "/home"
    },
    {
        id: 2,
        name: "Gallery",
        icon: <FaImages />,
        link: "/gallery"
    },
    {
        id: 3,
        name: "Products",
        icon: <FaProductHunt />,
        link: "/products"
    },
    {
        id: 4,
        name: "Shop",
        icon: <FaShoppingBag />,
        link: "/shop"
    },
    {
        id: 5,
        name: "About",
        icon: <FaQuestionCircle />,
        link: "/about"
    }
]
  1. 我正在检查鼠标是否正在进入或离开 ul 并将图标替换为文本。但同样,当屏幕尺寸低于 768px 时,我不需要显示文本,只显示图标。当鼠标悬停在图标上时,图标消失了,因此在 CSS 中我什么也看不到:
@media screen and (max-width: 768px){

    .name {
        display: none;
    }
}

第二个问题是:当我分别将鼠标悬停在每个图标上时,如何用图标替换文本。例如。我将鼠标悬停在“主页”图标上 => 它消失了,文本“主页”出现在它的位置上。谢谢

好的第一个问题,我们可以使用简单的 CSS 作为解决方案。 CSS 允许您在父元素悬停时设置子元素的样式,这正是我们在这里需要的。

我们将以 min-width 值作为目标,而不是以 max-width 值为目标,以减少代码。 因此,向每个导航文本和图标添加一个 class,每个

  • 都会成为回答您的第二个问题的父级最终代码如下所示:

     <ul>
          {NavData.map((val, key) => {
            return (
              <li
                className="childLI"
                key={key.id}
                onClick={() => (window.location.pathname = val.link)}
              >
                  <div className="name">{val.name}</div>
                  <div className="icon">{val.icon}</div>
                
              </li>
            );
          })}
        </ul>
    

    和 CSS:

     .name {
        display:none
      }
    
    
      @media screen and (min-width: 768px) {
        .childLI:hover  .icon{
          display:none;
        }
        .childLI:hover  .name{
          display:block;
        }
      }
    

    编辑:您没有状态或鼠标悬停功能。