React导航栏移动端按钮切换异常问题求助

问题根源 #

你当前代码同时渲染了带FaBars和FaTimes的两个独立按钮，没有通过isOpen状态控制它们的显示逻辑，导致初始时两个按钮都存在（大概率是CSS样式让关闭按钮默认显示、汉堡按钮被遮挡），点击时只会切换导航栏展开状态，不会切换按钮图标。

修复方案 #

方案1：单个按钮动态切换图标

只保留一个按钮，根据isOpen状态决定渲染FaBars还是FaTimes：

import React, { useState } from "react";
import "../styles/styles.css";
import { NavLink } from "react-router-dom";
import { FaBars, FaTimes } from "react-icons/fa";

function NavBar() {
  const [isOpen, setIsOpen] = useState(false);
  const toggleNavBar = () => {
    setIsOpen(!isOpen);
  };
  return (
    <>
      <nav
        className={`mobile-nav ${isOpen ? "responsive_nav" : ""}`}
      >
        <div className="itemL">
          <NavLink to="/" exact activeClassName="active">
            mjshubham21
          </NavLink>
        </div>
        <div className="itemR">
          {/* Nav links... */}
        </div>
      </nav>
      {/* 单个按钮根据状态切换图标 */}
      <button className="nav-btn" onClick={toggleNavBar}>
        {isOpen ? <FaTimes /> : <FaBars />}
      </button>
    </>
  );
}

export default NavBar;

方案2：条件渲染两个按钮

通过isOpen状态控制哪个按钮显示：

import React, { useState } from "react";
import "../styles/styles.css";
import { NavLink } from "react-router-dom";
import { FaBars, FaTimes } from "react-icons/fa";

function NavBar() {
  const [isOpen, setIsOpen] = useState(false);
  const toggleNavBar = () => {
    setIsOpen(!isOpen);
  };
  return (
    <>
      <nav
        className={`mobile-nav ${isOpen ? "responsive_nav" : ""}`}
      >
        <div className="itemL">
          <NavLink to="/" exact activeClassName="active">
            mjshubham21
          </NavLink>
        </div>
        <div className="itemR">
          {/* Nav links... */}
        </div>
      </nav>
      {/* 初始显示汉堡按钮，展开时显示关闭按钮 */}
      {!isOpen && (
        <button className="nav-btn" onClick={toggleNavBar}>
          <FaBars />
        </button>
      )}
      {isOpen && (
        <button className="nav-btn nav-close-btn" onClick={toggleNavBar}>
          <FaTimes />
        </button>
      )}
    </>
  );
}

export default NavBar;

关键说明 #

• 两种方案都通过isOpen状态关联按钮图标/显示状态，实现初始显示FaBars、点击切换图标的需求。
• 方案1更简洁，减少DOM元素；方案2适合需要给两个按钮设置不同样式的场景。
• 若navRef没有其他用途，可直接移除以简化代码。

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