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"
}
]
- 我正在检查鼠标是否正在进入或离开 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;
}
}
编辑:您没有状态或鼠标悬停功能。
我正在制作导航栏,但有点卡住了。 这是我的代码:
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"
}
]
- 我正在检查鼠标是否正在进入或离开 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;
}
}
编辑:您没有状态或鼠标悬停功能。