React JS实现点击侧边栏项时分别修改图标与文字颜色

要实现点击侧边栏菜单项时图标变橙色、文字变白的效果，只需两步：修改React组件添加选中状态，再补充对应的CSS样式。

步骤1：修改Navbar组件代码 #

添加状态跟踪选中的菜单项，同时修正原代码中侧边栏切换的逻辑错误：

import React, { useState } from "react";
import * as FaIcons from "react-icons/fa";
import * as AiIcons from "react-icons/ai";
import { Link } from "react-router-dom";
import { SidebarData } from "./SidebarData";
import "../App.css";
import { IconContext } from "react-icons";

function Navbar() {
  const [sidebar, setSidebar] = useState(true);
  // 新增状态：记录当前选中的菜单项索引
  const [activeItem, setActiveItem] = useState(0);

  // 修正侧边栏切换逻辑：取反当前状态
  const showSidebar = () => setSidebar(!sidebar);

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        <div className="navbar">
        </div>
        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <div className="app-logo">
            <img src="Src here" alt="logo"/>
          </div>
          <ul className="nav-menu-items" onClick={showSidebar}>
            {SidebarData.map((item, index) => {
              return (
                <li 
                  key={index} 
                  // 给选中的菜单项添加active类
                  className={`${item.cName} ${activeItem === index ? 'active' : ''}`}
                  // 点击菜单项时更新选中状态，阻止事件冒泡避免触发侧边栏切换
                  onClick={(e) => {
                    e.stopPropagation();
                    setActiveItem(index);
                  }}
                >
                  <Link to={item.path}>
                    {item.icon}
                    <span>{item.title}</span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

步骤2：添加CSS高亮样式 #

在你的CSS文件中新增以下样式，定义选中状态下的文字和图标颜色：

/* 选中菜单项的样式 */
.nav-text.active a {
  color: #ffffff; /* 文字变为白色 */
}

.nav-text.active .sidebar-icon {
  color: #ff7900; /* 图标变为橙色，可根据需求调整颜色值 */
}

可选：根据路由自动高亮（刷新页面保持状态） #

如果希望页面刷新后仍保持当前路由对应的菜单项高亮，可以使用useLocation钩子监听路由变化：

import React, { useState, useEffect } from "react";
import * as FaIcons from "react-icons/fa";
import * as AiIcons from "react-icons/ai";
import { Link, useLocation } from "react-router-dom";
import { SidebarData } from "./SidebarData";
import "../App.css";
import { IconContext } from "react-icons";

function Navbar() {
  const [sidebar, setSidebar] = useState(true);
  const [activeItem, setActiveItem] = useState(0);
  const location = useLocation();

  const showSidebar = () => setSidebar(!sidebar);

  // 监听路由变化，自动匹配对应菜单项
  useEffect(() => {
    const activeIndex = SidebarData.findIndex(item => item.path === location.pathname);
    if (activeIndex !== -1) {
      setActiveItem(activeIndex);
    }
  }, [location.pathname]);

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        <div className="navbar">
        </div>
        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <div className="app-logo">
            <img src="Src here" alt="logo"/>
          </div>
          <ul className="nav-menu-items" onClick={showSidebar}>
            {SidebarData.map((item, index) => {
              return (
                <li 
                  key={index} 
                  className={`${item.cName} ${activeItem === index ? 'active' : ''}`}
                  onClick={(e) => {
                    e.stopPropagation();
                    setActiveItem(index);
                  }}
                >
                  <Link to={item.path}>
                    {item.icon}
                    <span>{item.title}</span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

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