TSX开发Next.js菜单栏点击图标无法切换问题求助

你的代码核心问题是图标切换的条件判断逻辑颠倒，导致点击后图标没有按预期切换。

修复步骤： #

• 修正图标显示的三元表达式：将showSideBar ? faBars : faXmark改为showSideBar ? faXmark : faBars。初始状态showSideBar为false，此时应该显示汉堡图标faBars；点击后showSideBar变为true，显示关闭图标faXmark，这才符合逻辑。

修正后的完整代码： #

"use client"
import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars, faXmark } from "@fortawesome/free-solid-svg-icons";


export default function Navigation() {
    const [showSideBar, setShowSideBar] = useState<boolean>(false)

    const toggleNavbar = ():void => {
        setShowSideBar(!showSideBar)
    }

    return (
        <>
            <title>sweetieGN</title>
            <nav>
                <Image className="inline-block h-10 w-10 relative top-6 left-6 rounded-full ring-2 ring-white" src="/title.jpeg" width={100} height={100} alt="" />
                <div className="flex justify-end relative -top-2 right-12">
                    <button className="text-2xl text-white" onClick={toggleNavbar}>
                        <FontAwesomeIcon icon={showSideBar ? faXmark : faBars} />
                    </button>
                </div>
            </nav>
        </>
    )
}

额外检查点（可选）： #

• 确认"use client"指令正确放在文件最顶部，确保组件能正常使用React状态（你的代码已经正确添加）。
• 检查Font Awesome依赖是否正确安装：运行npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons确保依赖完整。

内容的提问来源于stack exchange，提问作者kin0lead