我有一个与尾随有关的问题和react .我有一个属性,如果<NavItem />被聚焦,那么背景和文本就会改变.<LanguageSwitcher />是另一个组件,如果它被聚焦,我希望它不会改变导航栏中其他项的焦点状态.<LanguageSwitcher />不影响URL.

以下是我在导航栏中的项目代码和<LanguageSwitcher />如何影响其他项目的焦点状态的图片:

LanguageSwitcher isn't clicked

LanguageSwitcher is clicked

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,还是直接用尾风?

推荐答案

"焦点"通常指的是用户当前可以与之交互的UI元素.我认为你把"焦点状态"和"活动状态"混为一谈了.我猜你希望Link保持"活动",而其他用户界面元素有或可能没有"焦点",并正在与之交互.切换到使用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;

100 I've just guessed/plucked the CSS classnames that looked like they were related to the "focus/active" CSS styling, you will want to double-check the actual classes in your implementation.

Javascript相关问答推荐

空的结果抓取网站与Fetch和Cheerio

处理时间和字符串时MySQL表中显示的日期无效

实现JS代码更改CSS元素

从页面到应用程序(NextJS):REST.STATUS不是一个函数

如何使用JS创建一个明暗功能按钮?

以编程方式聚焦的链接将被聚焦,但样式不适用

我想将Sitecore搜索面过滤器从多个转换为单个

每次重新呈现时调用useState initialValue函数

使用Reaction窗体挂钩注册日历组件

是否设置以JavaScript为背景的画布元素?

我为什么要使用回调而不是等待?

将Windows XP转换为原始数据以在html前端中显示

如何使用useparams从react路由中提取id

MAT-TREE更多文本边框对齐问题

在ReactJS上挂载组件时获得多个身份验证请求

Vue3合成API.来自本地存储的对象始终返回UNDEFINED

通过webContent发送数据时的空对象.发送

为什么它不记录任何东西在控制台?

如何改变Extra Reducers内部另一个减速器的状态?

将表单数据转换为多维数组