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,
          })}
相关推荐
全栈老李技术面试17 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
zyk_5209 天前
前端渲染pdf文件解决方案
javascript·pdf·react
百锦再11 天前
Python实现浏览器模拟访问及页面解析的全面指南
开发语言·前端·javascript·python·vue·框架·react
zy01010113 天前
useEffect
开发语言·前端·javascript·react·useeffect
ace_TiAmo15 天前
React8+taro开发微信小程序,实现lottie动画
微信小程序·小程序·react·taro
百锦再18 天前
Reactive编程框架与工具
前端·javascript·python·django·vue·框架·react
黄毛火烧雪下19 天前
umi框架开发移动端h5
react·umi
疏狂难除21 天前
【Tauri2】013——前端Window Event与创建Window
前端·javascript·rust·react·tauri2
冴羽yayujs23 天前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
AI_Auto1 个月前
AI Agent系列(八) -基于ReAct架构的前端开发助手(DeepSeek)
人工智能·react·ai agent