聚焦状态不应更改，React.JS + TailwindCSS

Question

我有一个关于tailwindcss和React的问题。 我有一个属性，如果<NavItem />被聚焦，那么背景和文本将会改变。 <LanguageSwitcher />是另一个组件，如果它被聚焦，我希望它不会改变导航栏中其他项目的聚焦状态。 <LanguageSwitcher /> 不影响URL。

这是我的导航栏中项目的代码以及<LanguageSwitcher />如何影响其他项目的聚焦状态的图像：

import React from "react";

import { Link } from "react-router-dom";

interface Props {
  title: string;
  url: string;
  icon: JSX.Element;
}

const NavItem: React.FC<Props> = ({ title, url, icon }) => {
  //https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes
  return (
    <Link
      to={url}
      className="text-center items-center flex-col justify-center font-medium  px-1 text-white  capitalize  hover:font-semibold  select-none group"
    >
      <div className="flex items-center justify-center mb-1 rounded-3xl px-2 py-1 group-hover:bg-btnHover group-focus:bg-btnActive group-focus:text-textActive transition-colors duration-75">
        {icon}
      </div>
      <span>{title}</span>
    </Link>
  );
};

export default NavItem;

这可行吗？如果可以，我该怎么做呢？也许可以使用react-router-dom中的useLocation或直接使用tailwindcss？

- Bolderaysky

Answer 1

“Focus”通常指用户当前可以与之交互的UI元素。我认为你混淆了“焦点状态”和“活动状态”。我猜你希望在其他UI元素有或可能没有“焦点”的情况下，Link保持“活动”状态。使用NavLink组件并有条件地应用“active”状态CSS类名。

这是一个示例^*：

import React from "react";
import { NavLink } from "react-router-dom";

interface Props {
  title: string;
  url: string;
  icon: JSX.Element;
}

const NavItem: React.FC<Props> = ({ title, url, icon }) => {
  //https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes
  return (
    <NavLink
      to={url}
      className="text-center items-center flex-col justify-center font-medium  px-1 text-white  capitalize  hover:font-semibold  select-none group"
    >
      {({ isActive }: { isActive: boolean }) => (
        <>
          <div
            className={
              [
                "flex items-center justify-center mb-1 rounded-3xl px-2 py-1 group-hover:bg-btnHover transition-colors duration-75"
                isActive ? "group-focus:bg-btnActive group-focus:text-textActive" : null
              ]
                .filter(Boolean)
                .join(" ")
            }
          >
            {icon}
          </div>
          <span>{title}</span>
        </>
      )}
    </NavLink>
  );
};

export default NavItem;

*注意：我只是猜测/挑选了看起来与“焦点/活动”CSS样式相关的CSS类名，您需要在实现中仔细检查实际类名。

- Drew Reese

---

感谢您的反馈！我已经在您的答案中更正了一些CSS类名，现在一切都可以按照需要工作。 - Bolderaysky