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