时间戳

首页 > 解决方案 > 使用 useState 反应 js 活动菜单项

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;

Sidebar.js

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;

谢谢！

标签： javascriptreactjs

解决方案

请记住，在您的示例中，每个人都SideLink保持自己的独立状态。当其中一个调用它自己的setactive时，它对任何其他都没有任何影响。

我认为您真正想要的是一个位于中心位置的状态，即父组件，Sidebar并转发到SideLink该值以及更改它的方法。

推荐阅读