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,})}