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

技术要点

动态样式

js 复制代码
className={`tabItem ${currentType === item.value && "active"}`}

安装 lodash

dos 复制代码
npm i --save lodash

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

js 复制代码
_.orderBy(dataList, "readNum", "desc")

src\Demo.css

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

js 复制代码
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 库可以让动态样式的书写更加清晰

安装

dos 复制代码
npm install classnames

使用

js 复制代码
import classNames from "classnames";

js 复制代码
className={`tabItem ${currentType === item.value && "active"}`}

改写为

js 复制代码
className={classNames("tabItem", {
            active: currentType === item.value,
          })}
相关推荐
lypzcgf2 天前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
小浣熊喜欢揍臭臭3 天前
react+umi项目如何添加electron的功能
javascript·electron·react
叫我阿柒啊3 天前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
lypzcgf3 天前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
叫我阿柒啊4 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
OEC小胖胖5 天前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web
OEC小胖胖5 天前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
lypzcgf5 天前
Coze源码分析-资源库-创建提示词-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
袋鼠云数栈前端7 天前
实现一个 AI 编辑器 - 行内代码生成篇
大数据·ai·react