焦点状态不应该改变，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？

Answer 1

“焦点”通常是指用户当前可以与之交互的 UI 元素。 我认为您将“焦点状态”与“活动状态”混为一谈。 我猜您希望Link保持“活动”状态，而其他 UI 元素具有或可能不具有“焦点”，并且正在与之交互。 切换到使用NavLink组件并有条件地应用“活动”状态 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 类名，您需要仔细检查实现中的实际类。