我有一个与尾随有关的问题和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
,还是直接用尾风?