React响应式侧边栏导航点击汉堡图标后样式自动复原求助

问题根源 #

你用了带href="/"的<a>标签包裹汉堡图标，点击时浏览器会触发页面跳转刷新，导致React组件重新挂载，showMediaIcons状态被重置为初始值false，所以侧边栏的红色样式（来自mobile-view类）刚生效就消失了。

解决方案一：阻止默认跳转行为 #

修改App.js中汉堡图标的点击事件，添加e.preventDefault()阻止页面刷新：

import NewsSec from "./News/NewsSec";
import ScoreSec from "./ScoreSec/ScoreSec";
import Menu from "./Sidebar/Menu";
import "./styles.css";
import { GiHamburgerMenu } from "react-icons/gi";
import React, { useState } from "react";

export default function App() {
  const [showMediaIcons, setShowMediaIcons] = useState(false);

  return (
    <div className="App">
      <div className="head">
        <div className="navicon">
          <a
            href="/"
            onClick={(e) => {
              e.preventDefault(); // 阻止页面默认跳转行为
              setShowMediaIcons(!showMediaIcons);
            }}
          >
            <GiHamburgerMenu />{" "}
          </a>
        </div>
        <div className="logo">Project</div>
        <div className="weather">weather section</div>
      </div>
      <div className="main">
        <div className="nav-section">
          <Menu classes={showMediaIcons ? "mobile-view navbar" : "navbar"} />
        </div>
        <div className="news-section">
          <NewsSec />
        </div>
        <div className="score-section">
          <ScoreSec />
        </div>
      </div>
    </div>
  );
}

解决方案二：使用语义化的标签 #

既然这个元素只是用来触发状态切换，不是跳转链接，换成<button>更符合语义，同时避免页面刷新问题：

import NewsSec from "./News/NewsSec";
import ScoreSec from "./ScoreSec/ScoreSec";
import Menu from "./Sidebar/Menu";
import "./styles.css";
import { GiHamburgerMenu } from "react-icons/gi";
import React, { useState } from "react";

export default function App() {
  const [showMediaIcons, setShowMediaIcons] = useState(false);

  return (
    <div className="App">
      <div className="head">
        <div className="navicon">
          <button
            onClick={() => {
              setShowMediaIcons(!showMediaIcons);
            }}
            style={{ background: 'none', border: 'none', cursor: 'pointer' }} // 基础样式重置，可移到CSS中
          >
            <GiHamburgerMenu />{" "}
          </button>
        </div>
        <div className="logo">Project</div>
        <div className="weather">weather section</div>
      </div>
      <div className="main">
        <div className="nav-section">
          <Menu classes={showMediaIcons ? "mobile-view navbar" : "navbar"} />
        </div>
        <div className="news-section">
          <NewsSec />
        </div>
        <div className="score-section">
          <ScoreSec />
        </div>
      </div>
    </div>
  );
}

说明 #

两种方案都能解决状态重置的问题，方案二更推荐，因为<button>是专门用于交互触发的元素，语义更清晰。如果用方案一，记得把<a>的默认样式（比如下划线、颜色）在CSS中重置，避免影响视觉效果。

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