使用react使下拉菜单可见

Question

我有下面的代码，里面有导航栏和下拉列表。我只想让下拉列表可见，但我做不到。我该怎么办。我的代码如下页眉.jsx

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
const Header = () => {
const [isVisible, setIsVisible] = useState(false);

return(


<div className="menu-container">
<nav className="nav">
<ul className="nav__menu">
<li className="nav__menu-item">
<Link to="Aboutus">About us</Link>

</li>
<li className="nav__menu-item">
<Link to="Myaccount">My account</Link>

</li>
<li className="nav__menu-item">
<Link to="Featured Product">Featured Product</Link>

</li>
<li className="nav__menu-item">
<Link to="WishList">WishList</Link>

</li>
<li className="nav__menu-items">
<Link to="Order Tracking">Order Tracking</Link>

</li>
<li className="nav__menu-items">
<Link to="English">English</Link>
{isVisible && (
<div>
<Link to className="box">English</Link>
<Link to className="box">German</Link>
<Link to className = "box">Spanish</Link>
</div>
)}

</li>
<li className="nav__menu-items">
<Link to="USD">USD</Link>
{isVisible && (
<div>
<Link to className="box">USD</Link>
<Link to className="box">INR</Link>
<Link to className="box">GBP</Link>
</div>
)}

</li>
</ul>
</nav>

</div>



)
}

export default Header

英文和美元的代码包含下拉列表，但我无法使其可见。我怎样才能使它可见。

Answer 1

试试这个。

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
const Header = () => {
const [isVisible, setIsVisible] = useState(false);
const toggle = () => {setIsVisible(!isVisible)}

return(     
<div className="menu-container">
<nav className="nav">
<ul className="nav__menu">
<li className="nav__menu-item">
<Link to="Aboutus">About us</Link>

</li>
<li className="nav__menu-item">
<Link to="Myaccount">My account</Link>

</li>
<li className="nav__menu-item">
<Link to="Featured Product">Featured Product</Link>

</li>
<li className="nav__menu-item">
<Link to="WishList">WishList</Link>

</li>
<li className="nav__menu-items">
<Link to="Order Tracking">Order Tracking</Link>

</li>
<li className="nav__menu-items">
<Link to="English" onClick={toggle}>English</Link>
{isVisible && (
<div>
<Link to className="box">English</Link>
<Link to className="box">German</Link>
<Link to className = "box">Spanish</Link>
</div>
)}

</li>
<li className="nav__menu-items">
<Link to="USD" onClick={toggle}>USD</Link>
{isVisible && (
<div>
<Link to className="box">USD</Link>
<Link to className="box">INR</Link>
<Link to className="box">GBP</Link>
</div>
)}

</li>
</ul>
</nav>

</div>



)
}

export default Header

Answer 2

您不会更改代码中isVisible的值。根据我们的需要，您应该使用setIsVisible函数将isVisible的新值设置为true或false。