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) => (
        <div
          className={`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,
          })}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WireShark对tcp通信数据的抓包

一、抓包准备工作 安装wireshark sudo apt update sudo apt install wireshark 运行 二、WireShark工具面板分析 上图中所显示的信息从上到下分布在 3 个面板中&#xff0c;每个面板包含的信息含义如下&#xff1a; Packet List 面板&#xff1a;显示 Wireshark 捕获到的所…

【项目实战】使用Github pages、Hexo如何10分钟内快速生成个人博客网站

文章目录 一.准备工作1.安装git2.安装node安装 cnpm 3.使用 GitHub 创建仓库&#xff0c;并配置 GitHub Pages0.Github Pages是什么1. 在 GitHub 上创建一个新仓库2. 创建您的静态网站3. 启用 GitHub Pages4. 等待构建完成5. 访问您的网站 二. Hexo1.什么是Hexo2.安装Hexo1. 安…

【核武器】2024 年美国核武器-20240507

2024年5月7日,《原子科学家公报》发布了最新版的2024美国核武器手册 Hans M. Kristensen, Matt Korda, Eliana Johns, and Mackenzie Knight, United States nuclear weapons, 2024, Bulletin of the Atomic Scientists, 80:3, 182-208, DOI: https://doi.org/10.1080/00963…

Vue面试经验2

Vue 你说你在vue项目中实现了自定义指令&#xff0c;如何实现 全局指令在main.js入口文件中实现 使用方法&#xff1a;v-指令名称 每个钩子函数都有两个参数&#xff08;ele,obj&#xff09; ele:绑定指令的元素 obj:指令的一些信息&#xff08;比如绑定指令的值&#xff0c…

OpenCV中的模块:点云配准

点云配准是点云相关的经典应用之一。配准的目的是估计两个点云之间位姿关系从而完成两者对应点之间的对齐/对应,因而在英文中又叫“align”、“correspondence”。笔者曾经是基于OpenCV进行三维重建的,并且从事过基于深度学习的6DoF位置估计等工作。在这些工作中,除了重建点…

docker compose kafka集群部署

kafka集群部署 目录 部署zookeeper准备工作2、部署kafka准备工作3、编辑docker-compose.yml文件4、启动服务5、测试kafka6、web监控管理 部署zookeeper准备工作 mkdir data/zookeeper-{1,2,3}/{data,datalog,logs,conf} -p cat >data/zookeeper-1/conf/zoo.cfg<<EOF…

基于STM32F401RET6智能锁项目(使用库函数点灯、按键)

点灯硬件原理图 1、首先&#xff0c;我们查看一下原理图&#xff0c;找到相对应的GPIO口 LED_R低电平导通&#xff0c;LED4亮&#xff0c;所以LED_R的GPIO口需要配置一个低电平才能亮&#xff1b; LED_G低电平导通&#xff0c;LED3亮&#xff0c;所以LED_R的GPIO口需要配置一…

[C++核心编程-06]----C++类和对象之对象模型和this指针

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

VTK 数据类型:规则网格

VTK 数据类型&#xff1a;规则网格 VTK 数据类型&#xff1a;规则网格分类三种规则网格需要的设置实例 VTK 数据类型&#xff1a;规则网格 分类 VTK 有 3 种规则网格&#xff1a; vtkImageData&#xff1a;几何结构和拓扑结构都是规则的。vtkRectilinearGrid&#xff1a;几何…

使用2G内存求20亿个数字中出现次数最多的N个

又是一个TOP -N的题目 我看了一下CSDN上大多数人的回答和GPT说的差不多&#xff0c;都是说使用哈希之类的&#xff1b; 我今天说一下我的解法&#xff0c;首先说一下不太快的基础解法 20亿数字使用uint32需要80GB&#xff0c; &#xff08;1&#xff09;分为40块读取&#…

云粒智慧实时数仓的架构演进分享:OceanBase + Flink CDC

4月20日&#xff0c;在2024 OceanBase开发者大会上&#xff0c;云粒智慧的高级技术专家付大伟&#xff0c;分享了云粒智慧实时数仓的构建历程。他讲述了如何在传统数仓技术框架下的相关努力后&#xff0c;选择了OceanBase Flink CDC架构的实时数仓演进历程。 业务背景及挑战 …

【C#进阶】简单数据结构类

简单数据结构类 文章目录 1、Arraylist1、ArrayList的本质2、声明3、增删查改4、装箱拆箱思考 背包售卖 2、Stack1、Stack的本质2、声明3、增取查改4、遍历思考 计算一个数的二进制 3、Queue1、Queue的本质2、声明3、增取查改4、遍历思考 每隔一段时间打印一条消息 4、Hashtab…

赣红孵联合卫东街道未保站开展未成年人保护法散落在每个角落活动

为进一步提高家长的法治意识&#xff0c;依法保障未成年人的合法权益&#xff0c;全力构建安全和谐文明家庭&#xff0c;5月8日&#xff0c;赣红孵社会组织培育中心联合卫东街道未成年人保护站在在南师附小红谷滩校区实验小学开展“未成年人保护法散落在每个角落”未成年人普法…

无列名注入

在进行sql注入时&#xff0c;一般都是使用 information_schema 库来获取表名与列名&#xff0c;因此有一种场景是传入参数时会将 information_schema 过滤 在这种情况下&#xff0c;由于 information_schema 无法使用&#xff0c;我们无法获取表名与列名。 表名获取方式 Inn…

如何通过汽车制造供应商协同平台,提高供应链的效率与稳定性?

汽车制造供应商协同是指在汽车制造过程中&#xff0c;整车制造商与其零部件供应商之间建立的一种紧密合作的关系。这种协同关系旨在优化整个供应链的效率&#xff0c;降低成本&#xff0c;提高产品质量&#xff0c;加快创新速度&#xff0c;并最终提升整个汽车产业的竞争力。以…

龙芯LA架构相关的存储管理

&#xff08;LoongArch-P92&#xff09; 目录 1.1 物理地址空间 1.2 虚拟地址空间 1.3 LA64架构下的虚拟地址缩减模式 1.4 存储访问类型 1.5 页表映射存储管理 1.5.1 TLB组织结构 1.5.2 基于TLB的虚实地址转换过程 1.5.3 TLB的软件管理 &#xff08;1&#xff09;…

计算概论学习笔记(1)

感谢北大李戈老师讲解的计算概论。 【道阻且长&#xff0c;行则将至】 很多年没有intensive coding&#xff0c;现在这个系列是coding retake&#xff0c;一点点回忆之前的知识&#xff0c;希望能重回到一线。主要内容包括C,C,Pytorch学术前沿项目学习和实践&#xff0c;预计…

线路和绕组中的波过程(一)

本篇为本科课程《高电压工程基础》的笔记。 本篇为这一单元的第一篇笔记。下一篇传送门。 当电路中的设备&#xff08;元件&#xff09;最大实际尺寸l大于人们所感兴趣的谐波波长 λ \lambda λ时&#xff0c;可以作为集中参数处理&#xff0c;否则就要当做分布参数处理。即&…

C语言 [力扣]详解环形链表和环形链表II

各位友友们&#xff0c;好久不见呀&#xff01;又到了我们相遇的时候&#xff0c;每次相遇都是一种缘分。但我更加希望我的文章可以帮助到大家。下面就来具体看看今天所要讲的题目。 文章目录 1.环形链表2.环形链表II 1.环形链表 题目描述:https://leetcode.cn/problems/link…

Babel基础知识及实现埋点插件

目录 前言 AST 遍历 Visitors Paths&#xff08;路径&#xff09; Paths in Visitors&#xff08;存在于访问者中的路径&#xff09; State&#xff08;状态&#xff09; Scopes&#xff08;作用域&#xff09; Bindings&#xff08;绑定&#xff09; API babylo…