如何在单击“反应卷轴”链接后使汉堡包菜单脱节

Question

我试图使我的汉堡包菜单与反应卷轴工作。它的工作原理是应该的，但是当我单击链接时，菜单不会消失。我试了下，但这使它更糟。

import React from 'react';
// import nav data
import { navData } from '../data';
// import components
import Socials from './Socials';
import { Link} from "react-scroll";
import { useState } from 'react';

const NavMobile = () => {
  // destructure nav data
  const [isActive, setIsActive] = useState(true)
  const { items } = navData;
  return (
    

   
    <nav className={`${isActive? "w-full h-full flex flex-col justify-evenly overflow-hidden" : ""}`}>
      <ul className='flex flex-col justify-center items-center gap-y-6 py-6 mb-8'>
        {items.map((item, index) => {
          return (
            <Link
            activeClass="active"
            to={item.href}
            spy={true}
            smooth={true}
            offset={-70}
            duration={500}
            >
            <li key={index} onClick={setIsActive(!isActive)}>
              <a className='text-2xl font-primary uppercase' href={item.href} >
                {item.name}
                
              </a>
            </li>
            </Link>
          );
        })}
      </ul>
      <div className='text-2xl'>
        <Socials />
      </div>
    </nav>
    
      
  );
};

export default NavMobile;

我只是找不出问题出在哪里

Answer 1

您的<nav>的条件<nav>不需要包装在模板文本${}中，而是按如下方式编写

<nav className={isActive ? "w-full h-full flex flex-col justify-evenly overflow-hidden" : ""}>

您的onClick处理程序也应该有它自己定义的函数。

const handleClick = () => {setIsActive(!isActive)}

，然后被解析为<li>的<li>方法。

<li key={index} onClick={handleClick}>

见https://bobbyhadz.com/blog/react-onclick-pass-event-and-parameter#:~:text=To%20pass%20an%20event%20and,event%20and%20parameter%20to%20handleClick%20。寻求更多的帮助。这是必要的，因为您将函数解析为onClick方法，而不是解析函数的结果。