如何使用状态将样式添加到 sidenav 中的活动选项卡

Question

我正在制作一个侧导航，我需要将左边框添加到当前选项卡如何通过将布尔值作为道具传递给 Child SideNavItem 类并在每个选项卡更改时更改它来使用状态来实现此目的.

这是我的父 SideNav 类的代码 在这里，我使用 if-else 条件来检查当前位置以及作为 Child 类道具的 pass。但是现在主页和我的个人资料都在获得侧边框。

import { NavLink } from "react-router-dom";
import SideNavItems from "./SideNavItems";
import React, {useState} from 'react';


const HomeIcon = (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="h-8 w-6"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
    />
  </svg>
);
const ProfileIcon = (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="h-8 w-6"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
    />
  </svg>
);
const PointIcon = (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="h-8 w-6"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
    />
  </svg>
);
const SupportIcon = (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="h-8 w-6"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
    />
  </svg>
);
const ContributeIcon = (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="h-8 w-6"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
    />
  </svg>
);




const SideNav = (): JSX.Element => {
  let [active, setActive] = useState(true);
  let isActive = (currentPath: any, thisPath: any) => {
    if (currentPath===thisPath) {
      setActive(true)
    } else {
      setActive(false);
    }
    return active;
  }
  const resetState = () => {
    setActive(false);
  };
  return (
    <div className="sidebar mt-5">
      <div className="logo ml-2">
        <img
            alt="logo"
            src={require("../assets/images/logo.png").default}
          />
      </div>
        <NavLink to="/"><SideNavItems active={() => isActive(window.location.pathname, "/")} icon={HomeIcon} text={"Home"}/></NavLink>
        <NavLink to="/profile"><SideNavItems active={() => isActive(window.location.pathname, "/profile")} icon={ProfileIcon} text={"My Profile"}/></NavLink>
        <SideNavItems active={""} icon={PointIcon} text={"Daily Points"}/>
        <SideNavItems active={""} icon={SupportIcon} text={"Support"}/>
        <SideNavItems active={""} icon={ContributeIcon} text={"Contribute"}/>
    </div>
  );
};

export default SideNav;

这是子类的代码

import React from "react";

type Props = {
  active: any;
  text: string;
  icon: any;
};
const SideNavItems: React.FC<Props> = ({active, icon, text }) => (
  <div className={`flex items-center cursor-pointer hover:text-red-400 transition duration-100 ease-in-out ${active ? ` text-red-400 border-l-4 border-red-400` : ``}`}>
    <div className="icon p-5">{icon}</div>
    <h2 className="font-extrabold text-xl mr-5">{text}</h2>
  </div>
);

export default SideNavItems;

Answer 1

您在这里面临的部分困惑是由于在isActive 函数中调用setActive 不会立即更改active 变量的值，并且由于您返回的是@987654324 @ 变量，你实际上返回的是之前的值active，而不是预期的值。

实际上，您可能不需要将active 的值保存在组件状态变量中：

const SideNav = (): JSX.Element => {
  return (
    <div className='sidebar mt-5'>
      <div className='logo ml-2'>
        <img alt='logo' src={require('../assets/images/logo.png').default} />
      </div>
      <NavLink to='/'>
        <SideNavItems
          active={window.location.pathname === '/'}
          icon={HomeIcon}
          text={'Home'}
        />
      </NavLink>
      <NavLink to='/profile'>
        <SideNavItems
          active={window.location.pathname === '/profile'}
          icon={ProfileIcon}
          text={'My Profile'}
        />
      </NavLink>
      <SideNavItems active={''} icon={PointIcon} text={'Daily Points'} />
      <SideNavItems active={''} icon={SupportIcon} text={'Support'} />
      <SideNavItems active={''} icon={ContributeIcon} text={'Contribute'} />
    </div>
  );
};

export default SideNav;

或者如果你使用 react 路由器，你可以使用 useLocation 钩子来确保组件在路径改变时总是重新渲染：

import { useLocation } from 'react-router-dom';

const SideNav = (): JSX.Element => {

  const { pathname: currentPath } = useLocation();

  return (
    <div className='sidebar mt-5'>
      <div className='logo ml-2'>
        <img alt='logo' src={require('../assets/images/logo.png').default} />
      </div>
      <NavLink to='/'>
        <SideNavItems
          active={currentPath === '/'}
          icon={HomeIcon}
          text={'Home'}
        />
      </NavLink>
      <NavLink to='/profile'>
        <SideNavItems
          active={currentPath === '/profile'}
          icon={ProfileIcon}
          text={'My Profile'}
        />
      </NavLink>
      <SideNavItems active={''} icon={PointIcon} text={'Daily Points'} />
      <SideNavItems active={''} icon={SupportIcon} text={'Support'} />
      <SideNavItems active={''} icon={ContributeIcon} text={'Contribute'} />
    </div>
  );
};

export default SideNav;