react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)

在这里插入图片描述

技术要点

动态样式

className={`tabItem ${currentType === item.value && "active"}`}

安装 lodash

npm i --save lodash

使用 lodash 对对象数组排序(不会改变源数组)

_.orderBy(dataList, "readNum", "desc")

src\Demo.css

.tabItem {display: inline-block;padding: 10px;cursor: pointer;
}.active {color: red;
}.itemBox {width: 400px;display: flex;
}.label {font-weight: bold;padding: 10px 0;
}.left {width: 50%;
}.center {width: 25%;text-align: center;
}.right {width: 25%;text-align: center;
}

src\Demo.jsx

import { useState } from "react";
import "./Demo.css";
import _ from "lodash";function Demo() {const dataList_init = [{id: 1,title: "文章1",pubTime: "2024/5/1",readNum: 9,},{id: 2,title: "文章2",pubTime: "2024/4/1",readNum: 2,},{id: 3,title: "文章3",pubTime: "2024/5/8",readNum: 6,},];const typeList = [{value: "new",label: "最新",},{value: "hot",label: "最热",},];const [currentType, setCurrentType] = useState("");const [dataList, setDataList] = useState(dataList_init);function currentTypeChange(newType) {setCurrentType(newType);if (newType === "hot") {// 倒序排列setDataList(_.orderBy(dataList, "readNum", "desc"));}if (newType === "new") {// 倒序排列setDataList(_.orderBy(dataList, "pubTime", "desc"));}}return (<>{typeList.map((item) => (<divclassName={`tabItem ${currentType === item.value && "active"}`}key={item.value}onClick={() => currentTypeChange(item.value)}>{item.label}</div>))}<div className="itemBox label"><div className="left">文章标题</div><div className="center">发布日期</div><div className="right">阅读量</div></div>{dataList.map((item) => (<div key={item.id} className="itemBox"><div className="left">{item.title}</div><div className="center">{item.pubTime}</div><div className="right">{item.readNum}</div></div>))}</>);
}export default Demo;

使用 classnames 库改写

classnames 库可以让动态样式的书写更加清晰

安装

npm install classnames

使用

import classNames from "classnames";

className={`tabItem ${currentType === item.value && "active"}`}

改写为

className={classNames("tabItem", {active: currentType === item.value,})}

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

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

相关文章

ArcGIS10.2系列许可到期解决方案

本文手机码字&#xff0c;不排版了。 昨晚&#xff08;2021\12\17&#xff09;12点后&#xff0c;收到很多学员反馈 ArcGIS10.2系列软件突然崩溃。更有的&#xff0c;今天全单位崩溃。 ​ 提示许可15天内到期。之前大部分许可是到2021年1月1日的。 ​ 后续的版本许可都是永久的…

深度学习技术之加宽前馈全连接神经网络

深度学习技术 加宽前馈全连接神经网络1. Functional API 搭建神经网络模型1.1 利用Functional API编写宽深神经网络模型进行手写数字识别1.1.1 导入需要的库1.1.2 加载虹膜&#xff08;Iris&#xff09;数据集1.1.3 分割训练集和测试集1.1.4 定义模型输入层1.1.5 添加隐藏层1.1…

SOCKS5代理、代理IP与网络安全策略

在全球化的商业竞争中&#xff0c;"出海"不仅是中国企业拓展国际市场的重要战略&#xff0c;也是一项涉及广泛技术应用的复杂工程。尤其是对于跨界电商和游戏行业&#xff0c;有效利用网络技术如SOCKS5代理和代理IP&#xff0c;以及构建严密的网络安全策略&#xff0…

图片转表格的免费软件,这几款值得收藏!

在数字化时代&#xff0c;图片转表格的需求日益增多。无论是工作汇报、数据分析还是学术研究&#xff0c;将图片中的信息转化为表格都能极大地提高工作效率。然而&#xff0c;许多人在面对这一任务时&#xff0c;往往感到无从下手。今天&#xff0c;我将为大家推荐几款免费的图…

Docker安装Mysql后无法连接排查过程

1. 查看Mysql是否启动成功 docker ps正常启动 2. 进入容器连接mysql docker exec -it c_mysql bash mysql -uroot -p发现可以访问 3. 查看并开放权限 mysql> grant all privileges on . to root%; #授权 mysql> flush privileges; #刷新权限表4. 开放端口 firewall-…

Lumerical Script ------ array 数组类型 和 matrix 矩阵类型

Lumerical Script ------ array 数组类型 和 matrix 矩阵类型 引言正文array 数组类型matrix 矩阵类型引言 这篇仅仅用作个人笔记,因为作者本人比较擅长 Python,每次写 Lumerical Script 总是会写错代码。 正文 array 数组类型 Lumerical Script 脚本有些像 Matlab 脚本,…

【Java代码审计】逻辑漏洞篇

【Java代码审计】逻辑漏洞篇 逻辑漏洞概述常见逻辑漏洞点 逻辑漏洞概述 逻辑漏洞一般是由于源程序自身逻辑存在缺陷&#xff0c;导致攻击者可以对逻辑缺陷进行深层次的利用。逻辑漏洞出现较为频繁的地方一般是登录验证逻辑、验证码校验逻辑、密码找回逻辑、权限校验逻辑以及支…

如何在群晖NAS中开启FTP并实现使用公网地址远程访问传输文件

文章目录 1. 群晖安装Cpolar2. 创建FTP公网地址3. 开启群晖FTP服务4. 群晖FTP远程连接5. 固定FTP公网地址6. 固定FTP地址连接 本文主要介绍如何在群晖NAS中开启FTP服务并结合cpolar内网穿透工具&#xff0c;实现使用固定公网地址远程访问群晖FTP服务实现文件上传下载。 Cpolar内…

Nginx内网环境开启https

文章目录 前言一、open-ssl1. 验证2. 安装3.生成ssl证书 一、nginx1. 验证支持模块2. 安装必要模块2.1 重新编译nginx2.2 替换原文件 3. 配置https 总结 前言 nginx开启https前提&#xff1a; 服务器支持open-sslnginx 包含--with-http_ssl_module --with-stream --with-stre…

[笔试强训day08]

文章目录 HJ108 求最小公倍数NC95 数组中的最长连续子序列DP39 字母收集 HJ108 求最小公倍数 HJ108 求最小公倍数 #include<iostream>using namespace std;int a,b;int gcd(int a,int b) {if(b0) return a;return gcd(b,a%b); } int main() {cin>>a>>b;int …

嵌入式和单片机的区别在哪?

嵌入式和单片机是两个不同的概念&#xff0c;它们在很多方面都存在着差异。嵌入式系统是一种专用的计算机系统&#xff0c;通常用于控制和监测其他设备。它通常由微处理器、存储器、输入/输出接口和其他外围设备组成。嵌入式系统可以运行各种操作系统&#xff0c;如 Linux、Win…

【Java代码审计】CSRF篇

【Java代码审计】CSRF篇 1.CSRF漏洞概述2.对 Referer 过滤不严导致的 CSRF 漏洞3.token 可重用导致 CSRF 漏洞4.CSRF 漏洞的防御 1.CSRF漏洞概述 CSRF&#xff08;Cross Site Request Forgery&#xff0c;跨站点请求伪造&#xff09;是目前出现次数比较多的漏洞&#xff0c;该…

el-dialog设置el-head固定

0 效果 1 代码 ::v-deep .adTextDetailDialogClass .el-dialog__body{max-height: calc(100vh - 150px);overflow: auto;border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf; } ::v-deep .adTextDetailDialogClass .el-dialog{position: fixed;height:fit-content;…

瑞芯微 rk3588 Linux系统备份还原 StepbyStep

1.系统备份 1.1 将瑞芯微平台嵌入式系统的root ssh 权限开通 step1:sudo vi /etc/ssh/sshd_config step2: 找到PermitRootLogin,把开关打开&#xff1a; PermitRootLogin yes step3:重启ssh服务 sudo systemctl restart sshd 1.2.使用瑞芯微的打包脚本把嵌入式系统系统打包 这…

通过钉钉卡片进行工单审批

我们通常通过钉钉机器人来发送通知&#xff0c;提醒审批人名下有待办工单需要处理。这种通知方式仅能提醒审批人到ITSM中处理&#xff0c;审批人需要打开电脑登陆平台处理&#xff0c;我们就考虑是否能有一种方式能够满足移动端审批&#xff1f; 这里我们可以使用ITSM的移动端版…

三十年前的一场篮球赛

高中时候&#xff0c;篮球是男同学最喜欢的运动。高一时&#xff0c;我们用班费买个篮球。那个篮球应该叫石球&#xff0c;一是因为它像石头一样硬&#xff0c;把我的手指头伤了好多次&#xff1b;二是它买回来后&#xff0c;一直到玩丢了&#xff0c;就没有打过气。后来打久了…

问题处理记录 | 表输出报错 Packet for query is too large (5,214,153 > 4,194,304).

这个错误是由于MySQL服务器接收到的查询数据包太大而引起的。具体来说&#xff0c;错误消息中提到的数据包大小为5,214,153字节&#xff0c;而MySQL服务器默认只接受最大为4,194,304字节的数据包。 要解决这个问题&#xff0c;你可以尝试通过修改MySQL服务器的配置来增大max_a…

Python图形界面(GUI)Tkinter笔记(六):用config对控件进行设置

想让代码更模块化、函数化、对象化,可使用"config()"方法设置标签控件或其它控件的参数。把需随时要修改的控件参数定义在“config()”方法里且把它封装在一个函数中,这时只需对这函数内的“config()”方法作出相应的修改即可,无需对主代码或全部代码重新修一遍。…

《小猫咪大城市》 48小时销量破40万套,一匹休闲游戏黑马诞生

易采游戏网5月13日消息&#xff0c;近日一款名为《小猫咪大城市》的游戏在Steam、Switch和Xbox平台上正式发售&#xff0c;凭借其独特的游戏设定和可爱的猫咪角色&#xff0c;迅速赢得了玩家们的喜爱。据官方宣布&#xff0c;游戏在发售后的短短48小时内&#xff0c;销量已经突…

【退役之重学Java】ThreadLocal

一、ThreadLocal 与 Synchronized 区别 ThreadLocal&#xff1a; 采用“以空间换时间”的方式&#xff0c;为每一个线程都提供了一份变量的副本&#xff0c;从而实现同时访问而互不干扰多线程中让每个线程之间的数据相互隔离 Synchronized 同步机制采用“以时间换空间”的方式…