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,
          })}
相关推荐
友莘居士10 小时前
Dify中的Agent和发现和调用mcp工具两个节点调用的异同
agent·react·dify·functioncalling·mcp
aiguangyuan1 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
叶 落5 天前
Component cannot be used as a JSX component
typescript·react
小浣熊喜欢揍臭臭7 天前
react+antd+表格拖拽排序以及上移、下移、移到顶部、移到底部
前端·前端框架·react
小浣熊喜欢揍臭臭7 天前
react+antd 可拖拽模态框组件
前端·javascript·react
人肉推土机9 天前
Planning Agent:基于大模型的动态规划与ReAct机制,实现复杂问题自适应执行求解
大模型·动态规划·react·planning agent
伍哥的传说9 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
止观止12 天前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
前端风云志13 天前
Ant Design如何自定义输入框(Input)组件样式
react·ant design
爱看书的小沐14 天前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow