react中设置activeClassName的笔记

React是一种流行的JavaScript库,用于构建动态用户界面。它具有许多有用的组件,其中之一是NavLink组件。NavLink组件用于在React应用程序中创建链接,并且它具有许多有用的属性,例如选中的样式设置。

react-router-dom": “^6.0.0”, 一下版本

在React中,NavLink组件的选中样式设置可以通过activeClassName属性进行设置。该属性指定当链接处于活动状态时应用的CSS类名。例如,如果您想将选定的链接的文本颜色更改为红色,则可以将activeClassName属性设置为“active-link”,然后在CSS中定义以下样式:

.active-link {color: red;
}

此外,NavLink还具有一个名为activeStyle的属性,该属性允许直接指定选中链接的CSS样式。例如,如果您想将选中的链接的文本颜色更改为蓝色并添加下划线,则可以在NavLink组件中设置activeStyle属性,如下所示:

<NavLink to="/home" activeStyle={{ color: 'blue', textDecoration: 'underline' }}>Home</NavLink>

在这个例子中,我们将选中链接的文本颜色设置为蓝色,并添加了下划线。

除了activeClassName和activeStyle属性之外,NavLink还具有其他一些属性,例如exact和strict。exact属性用于确保链接的路径完全匹配,而strict属性用于确保链接的路径与当前URL的末尾斜杠匹配。

React中的NavLink组件使得创建链接和处理选中的样式变得非常简单和直观。通过使用activeClassName和activeStyle属性,您可以轻松地自定义选中链接的样式,从而提高用户体验。

react-router-dom": “^6.0.0”, 一上版本

请使用以下方式

<NavLink className={({ isActive }) => (isActive ? " selectnav" : "")}to={ele.path}>{ele.name}
</NavLink>

isActive 是一个boolean 表示路径是否匹配上 返回是一个class名字

navLink的api讲解笔记

React是一种流行的JavaScript库,它可以帮助开发人员构建复杂的Web应用程序。在React中,NavLink是一个非常有用的组件,它可以帮助我们轻松地为导航栏添加样式和路由功能。在本文中,我们将深入研究NavLink的API和属性,并提供基本的使用案例和场景,以及代码和注释。

NavLink的API和属性

activeClassName

activeClassName是NavLink的一个属性,它定义了当链接处于活动状态时使用的CSS类名。例如,如果您想在导航栏中突出显示当前页面的链接,您可以将activeClassName设置为“active”,然后在CSS中定义.active类来设置样式。

activeStyle

activeStyle是NavLink的另一个属性,它允许您定义链接在活动状态下使用的样式。与activeClassName不同,您可以在activeStyle中直接指定CSS属性和值,而不需要在CSS文件中定义类名。例如,您可以将activeStyle设置为{fontWeight: “bold”, color: “red”},以使当前链接加粗并显示为红色。

exact

exact是NavLink的一个布尔属性,它指定链接是否必须与当前URL精确匹配才能处于活动状态。默认情况下,exact为false,这意味着如果链接的路径与当前URL的路径匹配,则它将处于活动状态。如果您将exact设置为true,则链接必须与当前URL的路径完全匹配才能处于活动状态。

strict

strict是NavLink的另一个布尔属性,它指定链接是否应该严格匹配路径。默认情况下,strict为false,这意味着如果链接的路径是当前URL路径的子集,则它将处于活动状态。如果您将strict设置为true,则链接必须与当前URL的路径完全匹配才能处于活动状态。

to

to是NavLink的必需属性,它指定链接的目标URL。to可以是一个字符串,也可以是一个对象。如果to是一个字符串,则它应该是链接的路径。如果to是一个对象,则它应该具有以下属性:

  • pathname:链接的路径
  • search:查询字符串
  • hash:URL中的哈希值
  • state:一个对象,它将与URL一起传递,可以在目标页面中使用。

基本的使用案例和场景

下面是一个基本的使用案例,它演示了如何使用NavLink来创建一个简单的导航栏:

import { NavLink } from "react-router-dom";function Navigation() {return (<nav><ul><li><NavLink exact to="/">Home</NavLink></li><li><NavLink to="/about">About</NavLink></li><li><NavLink to="/contact">Contact</NavLink></li></ul></nav>);
}

在上面的代码中,我们导入了NavLink组件,并使用它来创建三个链接。我们将exact设置为true,以确保只有当链接的路径与当前URL完全匹配时才会处于活动状态。我们还没有定义activeClassName或activeStyle,因此链接在活动状态下将没有任何特殊的样式。

下面是一个稍微复杂一些的使用场景,它演示了如何使用activeClassName和activeStyle来突出显示当前页面的链接:

import { NavLink } from "react-router-dom";function Navigation() {return (<nav><ul><li><NavLink exact to="/" activeClassName="active">Home</NavLink></li><li><NavLink to="/about" activeClassName="active">About</NavLink></li><li><NavLink to="/contact" activeClassName="active">Contact</NavLink></li></ul></nav>);
}

在上面的代码中,我们将activeClassName设置为“active”,以使当前页面的链接突出显示。我们还可以在CSS中定义.active类来设置样式。如果您想直接在代码中指定样式,您可以使用activeStyle属性。

import { NavLink } from "react-router-dom";function Navigation() {const activeStyle = {fontWeight: "bold",color: "red"};return (<nav><ul><li><NavLink exact to="/" activeStyle={activeStyle}>Home</NavLink></li><li><NavLink to="/about" activeStyle={activeStyle}>About</NavLink></li><li><NavLink to="/contact" activeStyle={activeStyle}>Contact</NavLink></li></ul></nav>);
}

在上面的代码中,我们定义了一个名为activeStyle的常量,它包含在活动状态下使用的CSS属性和值。然后,我们将activeStyle传递给每个NavLink组件的activeStyle属性。这将使当前页面的链接加粗并显示为红色。

代码和注释

下面是一个完整的代码示例,它演示了如何使用NavLink来创建一个具有样式和路由功能的导航栏:

import React from "react";
import { NavLink } from "react-router-dom";function Navigation() {// 定义在活动状态下使用的CSS样式const activeStyle = {fontWeight: "bold",color: "red"};return (<nav><ul>{/* 创建Home链接 */}<li><NavLink exact to="/" activeClassName="active" activeStyle={activeStyle}>Home</NavLink></li>{/* 创建About链接 */}<li><NavLink to="/about" activeClassName="active" activeStyle={activeStyle}>About</NavLink></li>{/* 创建Contact链接 */}<li><NavLink to="/contact" activeClassName="active" activeStyle={activeStyle}>Contact</NavLink></li></ul></nav>);
}export default Navigation;

在上面的代码中,我们首先导入React和NavLink。然后,我们定义了一个名为activeStyle的常量,它包含在活动状态下使用的CSS属性和值。接下来,我们使用NavLink创建三个链接,并将activeClassName和activeStyle设置为“active”和activeStyle,以使当前页面的链接突出显示。最后,我们将Navigation组件导出为默认值。

在本文中,我们深入研究了NavLink的API和属性,并提供了基本的使用案例和场景,以及代码和注释。NavLink是React中非常有用的组件之一,它可以帮助我们轻松地为导航栏添加样式和路由功能。如果您正在开发React应用程序,并且需要一个易于使用的导航组件,那么NavLink是一个很好的选择。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/149588.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pyside6/PyQt6如何添加右键菜单,源码示例

文章目录 📖 介绍 📖🏡 环境 🏡📒 源码分享 📒🎈 添加图标📖 介绍 📖 在UI开发中经常会使用到右键菜单,本文记录了一个添加右键菜单的示例,可以举一反三,仅供参考! 🏡 环境 🏡 本文演示环境如下 Windows11Python3.11.5PySide6📒 源码分享 📒 下面…

左支座零件的机械加工工艺规程及工艺装备设计【计算机辅助设计与制造CAD】

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;左支座 获取完整CAD工程源文件论文报告说明书等 一、论文目录 二、论文部分内容 设计任务 1.完成左支座零件—毛坯合图及左支座零件图 2.完成左支座零件工艺规程设计 3.完成左支座零件加工工艺卡 4.机床专用夹具装备总图 …

ACWSpring1.3

git使用git status看我们仓库有多少什么东西 首先,前端写ajax写上我们的访问路径(就在我们前端的源代码里面),我们建了两个包pkController用于前端页面url映射过来一层一层找到我们的RestController返回bot1里面有键值,返回的这就是一个session对象bot1这个map.前端拿到我们bot…

汇编-在VisualStudio调试器中显示数组

1.调试运行程序 2.菜单-->调试--> 3.在地址栏上输入 &数组名 4.其它选项 右击窗口 根据实际情况自己选择

石油石化物资采购杂志社石油石化物资采购编辑部2023年第18期部分目录

物资采购与管理 依法规范招标采购融合现代智慧供应链的路径探索 黄缵烨1-3 海上油气建设项目工程物资价格数据库的建立和应用研究 韩萍萍4-6《石油石化物资采购》投稿&#xff1a;cnqikantg126.com 招投标采办管理风险研究 王威7-9 海外风电总包项目风机等主要设备采购管理要点…

51.Sentinel微服务保护

目录 &#xff08;1&#xff09;初识Sentinel。 &#xff08;1.1&#xff09;雪崩问题及解决方案。 &#xff08;1.1.1&#xff09;雪崩问题。 &#xff08;1.1.2&#xff09;解决雪崩问题的四种方式。 &#xff08;1.1.3&#xff09;总结。 &#xff08;1.2&#xff09;…

在Ubuntu系统中安装VNC并结合内网穿透实现公网远程访问

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

CleanMyMac X2024免费测试版好不好用?值不值得下载

如果你是一位Mac用户&#xff0c;你可能会遇到一些问题&#xff0c;比如Mac运行缓慢、磁盘空间不足、应用程序难以管理等。这些问题会影响你的Mac的性能和体验&#xff0c;让你感到沮丧和无奈。那么&#xff0c;有没有一款软件可以帮助你解决这些问题呢&#xff1f;答案是肯定的…

Fourier分析导论——第6章——R^d 上的Fourier变换(E.M. Stein R. Shakarchi)

第6章 上的 Fourier 变换 It occurred to me that in order to improve treatment planning one had to know the distribution of the at- tenuation coefficient of tissues in the body. This in- formation would be useful for diagnostic purposes and would con…

Mac安装win程序另一个方案

前言 今天跟大家分享的是mac装win程序的另一个思路&#xff0c;不需要大动干戈的装双系统、虚拟机。最后分享感受&#xff0c;先说过程吧。 一、思路介绍 其实&#xff0c;就是利用CrossOver&#xff0c;这个软件的介绍大家可以自行了解。不过不得不说这玩意还是国外的人思路新…

C#中.NET 7.0 Windows窗体应用通过EF访问已有数据库并实现追加、删除、修改、插入记录

目录 一、前言 1.Database.ExecuteSqlCommand 方法不被EF7.0支持 2.SET IDENTITY_INSERT Blog {ON,OFF}不起作用 3.主键和标识列分离&#xff0c;成功实现插入与修改 二、新建本文涉及的项目 三、程序设计 1.Form1.cs源码 2.Form1.cs[设计] 四、生成和测试 1.原始表 …

SMT贴片、PCB板、PCBA电路板、DIP插件你知道多少

一、SMT是电子元器件的基础元件之一&#xff0c;称为表面组装技术&#xff08;或是表面贴装技术&#xff09;&#xff0c;分为无引脚或短引线&#xff0c;是通过回流焊或浸焊加以焊接组装的电路装连技术&#xff0c;也是目前电子组装行业里最流行的一种技术和工艺。 特点&…

安装keras、tensorflow

看起来你仍然面临SSL证书验证失败的问题。这可能是由于你的网络环境或代理设置引起的。你可以尝试以下几个步骤&#xff1a; 检查网络连接&#xff1a; 确保你的计算机能够正常访问互联网。 关闭代理&#xff1a; 如果你使用了代理&#xff0c;尝试暂时关闭它&#xff0c;然后…

基于GATK流程化进行SNP calling

在进行变异检测时&#xff0c;以群体基因组重测序数据为例&#xff0c;涉及到的个体基本都是上百个&#xff0c;而其中大多数流程均是重复的步骤。 本文将基于GATK进行SNP calling的流程写入循环&#xff0c;便于批量分析。 1 涉及变量 1.工作目录work_dir/ 2.参考基因组ref…

拉链表-spark版本

采用spark实现的拉链表 拉链表初始化 import org.apache.spark.sql.SparkSession import org.apache.spark.sql.functions.lit/*** 拉链表初始化*/ object table_zip_initial {val lastDay "9999-12-31"def main(args: Array[String]): Unit {var table_base &q…

C#调用Windows系统自带虚拟键盘的方法

C#调用Windows系统自带虚拟键盘&#xff0c;可以通过以下方法。 1、添加外部引用 private const Int32 WM_SYSCOMMAND 274;private const UInt32 SC_CLOSE 61536;[DllImport("user32.dll", SetLastError true, CharSet CharSet.Auto)]private static extern bo…

目标检测YOLO实战应用案例100讲-基于机器视觉的水稻病虫害监测预警(续)

目录 3.3 试验结果与分析 3.3.1 数据集介绍 3.3.3 评价标准 3.3.4 模型训练参数设置

[Genode] ARM TrustZone

这是关于读文章ARM TrustZone的记录&#xff0c;原文是英文&#xff0c;刚开始会有点反应不过来&#xff0c;这里大部分是对文章的翻译与提取。 ARM信任区技术 ARM信任区是在 热烈讨论关于X86平台上的可信平台模块&#xff08;TPM&#xff09; 时引入的。。 就像TPM芯片神奇…

【机器学习算法】机器学习:支持向量机(SVM)

转载自&#xff1a; 【精选】机器学习&#xff1a;支持向量机&#xff08;SVM&#xff09;-CSDN博客 1.概述 1.1&#xff0c;概念 支持向量机&#xff08;SVM&#xff09;是一类按监督学习方式对数据进行二元分类的广义线性分类器&#xff0c;其决策边界是对学习样本求解的最…