Reactjs => 动态活动菜单更改颜色

Question

当我想在用户想要单击侧边栏中的菜单时进行动态颜色更改时，我在这里遇到了问题。

因此，当用户想要将页面从 /building 移动到 /street 时，用户将单击“street”菜单，并希望街道菜单会像建筑物菜单一样改变颜色，当菜单处于活动状态时会变成红色。

但是，当我没有按预期完成时，结果如下图所示。

或许高手可以帮帮我。非常感谢

侧边栏.jsx

import React from "react";
import { useState } from "react";
import { BiBuildingHouse } from "react-icons/bi";
import { FaRoad } from "react-icons/fa";
import { Link, NavLink } from "react-router-dom";

const Sidebar = () => {
  const [activeMenu, setActiveMenu] = useState(false);

  return (
    <div className='w-[16rem] h-[72rem] bg-[#FFFFFF] px-5 py-3 md:px-8 md:py-5 drop-shadow-xl"'>
      <h1 className="text-[#92929D] font-semibold ml-3">DASHBOARD</h1>

      <NavLink
        to="/try/building"
        className={
          activeMenu === "/try/building"
            ? "mr-6 mt-4 w-[12rem] h-[4rem] bg-red-500 text-white py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer"
            : "mr-6 mt-4 text-black py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer"
        }
        onClick={() => {
          setActiveMenu("/try/building");
        }}
        active={activeMenu}
      >
        <div className="mr-6 mt-4 w-[12rem] h-[4rem] bg-red-500 py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer">
          <div className="inline-flex gap-4 items-center">
            <BiBuildingHouse size={25} className="text-white" />
            <h1 className="text-white">Building</h1>
          </div>
        </div>
      </NavLink>

      <Link
        to="/try/street"
        className={
          activeMenu === "/try/street"
            ? "mr-6 mt-4 w-[12rem] h-[4rem] bg-red-500 text-white py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer"
            : "mr-6 mt-4 text-black py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer"
        }
        onClick={() => {
          setActiveMenu("/try/street");
        }}
        active={activeMenu}
      >
        <div className="mr-6 w-[12rem] h-[4rem] py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer">
          <div className="inline-flex gap-4 items-center">
            <FaRoad size={25} className="text-[#92929D]" />
            <h1 className="text-black">Street</h1>
          </div>
        </div>
      </Link>
    </div>
  );
};

export default Sidebar;

Answer 1

你不能像那样使用useState()，你要么有一个文本状态，要么有一个布尔状态。 你需要像这样使用它：

const [activeMenu, setActiveMenu] = useState(false);
const [activeLink, setActiveLink] = useState("");

其次，你不能对两个链接都使用activeMenu，你根本不需要这个active={activeMenu}。

请使用简单的 CSS，无论您使用什么库，都必须有 classname:active， 或简单地添加：

.my_className {
    background: white;
    color: black;
}
.my_className:active, .my_className:selected, .my_className:hover {
    background: red;
}

然后将my_className 添加到每个菜单项。

更简单的方法可以使用ant.desgin 库，非常直接且易于实现。

Answer 2

当前代码的主要问题是所有链接都试图使用相同的activeMenu 状态。 NavLink 和 Link 组件都不会消耗 active 属性。

默认情况下，NavLink 组件已经应用了 active 类，否则已经可以处理您尝试手动执行的逻辑。 className 属性也可以接受一个回调函数，当它与当前 URL 路径名匹配时，它会传递一个 isActive 属性。

例子：

const Sidebar = () => {
  return (
    <div className='w-[16rem] h-[72rem] bg-[#FFFFFF] px-5 py-3 md:px-8 md:py-5 drop-shadow-xl"'>
      <h1 className="text-[#92929D] font-semibold ml-3">DASHBOARD</h1>

      <NavLink
        to="/try/building"
        className={({ isActive }) => 
          isActive
            ? "mr-6 mt-4 w-[12rem] h-[4rem] bg-red-500 text-white py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer"
            : "mr-6 mt-4 text-black py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer"
        }
      >
        <div className="mr-6 mt-4 w-[12rem] h-[4rem] bg-red-500 py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer">
          <div className="inline-flex gap-4 items-center">
            <BiBuildingHouse size={25} className="text-white" />
            <h1 className="text-white">Building</h1>
          </div>
        </div>
      </NavLink>

      <NavLink
        to="/try/street"
        className={({ isActive }) => 
          isActive
            ? "mr-6 mt-4 w-[12rem] h-[4rem] bg-red-500 text-white py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer"
            : "mr-6 mt-4 text-black py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer"
        }
      >
        <div className="mr-6 w-[12rem] h-[4rem] py-3 md:px-8 md:py-5 rounded-2xl drop-shadow-xl cursor-pointer">
          <div className="inline-flex gap-4 items-center">
            <FaRoad size={25} className="text-[#92929D]" />
            <h1 className="text-black">Street</h1>
          </div>
        </div>
      </Link>
    </div>
  );
};