Javascript 使用useState响应js活动菜单项

我一直试图通过在React js中使用useState来添加一个具有活动样式的菜单，但由于某些原因，它只处于活动状态，在单击其他菜单项时不会返回到非活动状态。另一方面，当我从Sidebar.js中将我的活动状态作为道具传递时，它可以完美地工作

反应版本：“反应”：“^17.0.2” 节点版本：v16.0.0

这是我的密码：

SideLink.js

import React, {useState} from "react";

const SideLink = ({ name, Icon}) => {
  const [active, setactive] = useState("Home")

  return (
    <li className="group" onClick={() => setactive(name)}>
      <a href={name.toLowerCase()} className="cursor-pointer block mb-2 pointer-events-none">
        <div className="inline-block">
          <div
            className={`
            flex items-center 
            group-hover:bg-blue-50 
            group-hover:text-red-500 
            rounded-full pl-2 py-3 pr-6
            ${active === name ? "text-red-400" : ""}
            `}
            >
            <Icon />
            <span className="ml-2 font-bold text-xl">{name}</span>
          </div>
        </div>
      </a>
    </li>
  );
};

export default SideLink;

import React, {useState} from "react";
import SideLink from "../../assets/components/SideLink";
import {
  BookmarksIcon,
  ExploreIcon,
  HomeIcon,
  ListsIcon,
  MessagesIcon,
  MoreIcon,
  NotificationsIcon,
  ProfileIcon,
} from "../../assets/icons/Icon";


const sideLinks = [
  {
    name: "Home",
    icon: HomeIcon,
  },
  {
    name: "Explore",
    icon: ExploreIcon,
  },
  {
    name: "Notifications",
    icon: NotificationsIcon,
  },
  {
    name: "Messages",
    icon: MessagesIcon,
  },
  {
    name: "Bookmarks",
    icon: BookmarksIcon,
  },
  {
    name: "Lists",
    icon: ListsIcon,
  },
  {
    name: "Profile",
    icon: ProfileIcon,
  },
  {
    name: "More",
    icon: MoreIcon,
  },
];

const Sidebar = () => {

  return (
    <div className="w-72 flex flex-col justify-between px-2">
      <div>
        <nav>
          <ul>
            {sideLinks.map(({ name, icon }) => (
              <SideLink key={name} name={name} Icon={icon}/>
            ))}
          </ul>
        </nav>
      </div>
      <div>bottom</div>
    </div>
  );
};

export default Sidebar;

import React，{useState}来自“React”；
常量侧链=（{name，Icon}）=>{
const[active，setactive]=useState（“Home”）
返回(
setactive（name）}>

);
};
导出默认侧链；

侧边栏.js

import React, {useState} from "react";

const SideLink = ({ name, Icon}) => {
  const [active, setactive] = useState("Home")

  return (
    <li className="group" onClick={() => setactive(name)}>
      <a href={name.toLowerCase()} className="cursor-pointer block mb-2 pointer-events-none">
        <div className="inline-block">
          <div
            className={`
            flex items-center 
            group-hover:bg-blue-50 
            group-hover:text-red-500 
            rounded-full pl-2 py-3 pr-6
            ${active === name ? "text-red-400" : ""}
            `}
            >
            <Icon />
            <span className="ml-2 font-bold text-xl">{name}</span>
          </div>
        </div>
      </a>
    </li>
  );
};

export default SideLink;

import React, {useState} from "react";
import SideLink from "../../assets/components/SideLink";
import {
  BookmarksIcon,
  ExploreIcon,
  HomeIcon,
  ListsIcon,
  MessagesIcon,
  MoreIcon,
  NotificationsIcon,
  ProfileIcon,
} from "../../assets/icons/Icon";


const sideLinks = [
  {
    name: "Home",
    icon: HomeIcon,
  },
  {
    name: "Explore",
    icon: ExploreIcon,
  },
  {
    name: "Notifications",
    icon: NotificationsIcon,
  },
  {
    name: "Messages",
    icon: MessagesIcon,
  },
  {
    name: "Bookmarks",
    icon: BookmarksIcon,
  },
  {
    name: "Lists",
    icon: ListsIcon,
  },
  {
    name: "Profile",
    icon: ProfileIcon,
  },
  {
    name: "More",
    icon: MoreIcon,
  },
];

const Sidebar = () => {

  return (
    <div className="w-72 flex flex-col justify-between px-2">
      <div>
        <nav>
          <ul>
            {sideLinks.map(({ name, icon }) => (
              <SideLink key={name} name={name} Icon={icon}/>
            ))}
          </ul>
        </nav>
      </div>
      <div>bottom</div>
    </div>
  );
};

export default Sidebar;

import React，{useState}来自“React”；
从“../../assets/components/SideLink”导入侧链；
进口{
西贡，
探险家，
HomeIcon，
ListsIcon，
信息中心，
莫雷肯，
通知SICON，
ProfileIcon，
}来自“../../assets/icons/Icon”；
常数侧链=[
{
姓名：“家”，
图标：HomeIcon，
},
{
名称：“探索”，
图标：ExploreIcon，
},
{
名称：“通知”，
图标：NotificationsIcon，
},
{
名称：“消息”，
图标：MessagesIcon，
},
{
名称：“书签”，
图标：书签图标，
},
{
名称：“列表”，
图标：ListsIcon，
},
{
名称：“个人资料”，
icon:ProfileIcon，
},
{
名称：“更多”，
图标：更多图标，
},
];
常量边栏=（）=>{
返回(

{sideLinks.map（{name，icon}）=>(
))}

底部
);
};
导出默认边栏；

---

谢谢大家!

请记住，在您的示例中，每个

侧链

都保持各自独立的状态。当其中一个调用自己的

setactive

时，它不会对其他任何函数产生任何影响

---

我认为您真正想要的是一个位于中心位置的状态，即父组件，

侧栏，并将该值转发给
侧链
，以及更改该值的方法。
请记住，在您的示例中，每个
侧链
都保持自己的独立状态。当其中一个调用自己的
setactive
时，它不会对其他任何函数产生任何影响

我认为您真正想要的是一个位于中心位置的状态，父组件，
侧栏
，并将该值转发到
侧链接
，以及更改该值的方法。
是否愿意解释原因？对不起，我只是想弄明白背后的逻辑。。谢谢~想解释一下原因吗？对不起，我只是想弄明白背后的逻辑。。谢谢~非常感谢您的清晰解释！现在，我完全理解了这种方法背后的逻辑。非常感谢您的清晰解释！现在，我完全理解这种方法背后的逻辑。