【React】详解“最新”和“最热”切换与排序

news2024/11/13 10:48:18

文章目录

    • 一、基本概念和初始化
    • 二、切换与排序功能的实现
      • 1. 函数定义和参数
      • 2. 设置活动 Tab
      • 3. 定义新列表变量
      • 4. 根据排序类型处理列表
        • 4.1 按时间降序排序
        • 4.2 按点赞数降序排序
      • 5. 更新评论列表
    • 三、渲染导航 Tab 和评论列表
      • 1. `map` 方法
      • 2. `key` 属性
      • 3. `className` 动态赋值
      • 4. `onClick` 事件处理器
      • 5. `item.text`
      • 6. `<li>` 容器
    • 四、进阶应用和实际案例
      • 1. 高亮 Tab 和排序状态管理
      • 2. 多条件排序

在现代网页应用中,评论列表是常见的功能模块。为了提高用户体验,我们经常需要对评论进行排序和筛选,以便用户能够更方便地找到感兴趣的内容。本文将深入探讨如何在 React 应用中实现“最新”和“最热”切换与排序功能,涵盖其基本用法、进阶应用以及实际案例。通过本文,你将全面了解如何在 React 应用中有效地实现评论排序功能,并灵活应用于实际项目中。

一、基本概念和初始化

评论数据和用户信息

首先,我们需要一些初始化的数据来展示评论列表。在下面的代码中,我们定义了一个包含评论数据的列表 defaultList 和一个模拟的当前用户 user

// 评论列表数据
const defaultList = [
  // 每个评论包含 id、用户信息、内容、时间和点赞数
  {
    rpid: 3,
    user: {
      uid: '13258165',
      avatar: '',
      uname: '周杰伦',
    },
    content: '哎哟,不错哦',
    ctime: '10-18 08:15',
    like: 88,
  },
  //....
];

// 当前登录用户信息
const user = {
  uid: '30009257',
  avatar: 'path/to/avatar.png',
  uname: '黑马前端',
};

在这些数据中,defaultList 包含了评论的基本信息,包括评论 ID、用户信息、评论内容、时间和点赞数。

二、切换与排序功能的实现

在应用中,提供了两个导航选项卡(Tab):最热最新。用户可以通过点击这两个选项卡来切换评论的排序方式。

// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
];

使用 useState 来管理当前选中的 Tab,并通过点击事件更新状态。onToggle 函数用于处理 Tab 的切换逻辑,并对评论列表进行相应的排序。

const [activeTab, setActiveTab] = useState('hot');
const [list, setList] = useState(defaultList);

const onToggle = type => {
  setActiveTab(type);
  let newList;
  if (type === 'time') {
    // 按时间降序排序
    newList = orderBy(list, 'ctime', 'desc');
  } else {
    // 按点赞数降序排序
    newList = orderBy(list, 'like', 'desc');
  }
  setList(newList);
};

在这个函数中,orderBy 函数(来自 lodash 库)根据传入的排序字段(如 ctimelike)和排序顺序(降序)对评论列表进行排序,并更新状态。

1. 函数定义和参数

onToggle 是一个函数,接收一个参数 type,用于指定当前选中的排序类型。这个 type 参数可以是 'time''hot',分别代表“最新”和“最热”两种排序方式。

2. 设置活动 Tab

setActiveTab(type);
  • 功能:调用 setActiveTab 函数来更新当前活动的 Tab。
  • 作用:更新组件的状态,使得用户界面能够反映当前选中的排序方式。例如,如果用户点击了“最新”Tab,setActiveTab 会将 activeTab 的值更新为 'time',从而使得“最新”Tab 高亮显示。

3. 定义新列表变量

let newList;
  • 功能:声明一个变量 newList,用于存储排序后的评论列表。
  • 作用:这个变量将在根据 type 排序评论列表后被赋值。

4. 根据排序类型处理列表

4.1 按时间降序排序
if (type === 'time') {
  // 按时间降序排序
  newList = orderBy(list, 'ctime', 'desc');
}
  • 功能:检查 type 是否为 'time'
  • 作用:如果是 'time',则使用 orderBy 函数对 list(评论列表)按 ctime(评论时间)进行降序排序。orderBylodash 库中的一个函数,允许指定排序字段和排序顺序。
  • 具体操作:
    • list 是待排序的数组。
    • 'ctime' 是排序字段,即按照评论时间排序。
    • 'desc' 指定排序顺序为降序。
4.2 按点赞数降序排序
else {
  // 按点赞数降序排序
  newList = orderBy(list, 'like', 'desc');
}
  • 功能:如果 type 不是 'time',则认为排序方式是按点赞数排序。
  • 作用:使用 orderBy 函数对 listlike(点赞数)进行降序排序。
  • 具体操作:
    • list 是待排序的数组。
    • 'like' 是排序字段,即按照点赞数排序。
    • 'desc' 指定排序顺序为降序。

5. 更新评论列表

setList(newList);
  • 功能:调用 setList 函数来更新组件状态中的评论列表。
  • 作用:将排序后的 newList 更新到组件状态中,从而使得评论列表的显示顺序根据用户的选择进行更新。

三、渲染导航 Tab 和评论列表

在组件的返回 JSX 中,渲染了 Tab 切换按钮和评论列表。点击 Tab 按钮会触发 onToggle 函数,更新排序方式。

return (
  <div className="app">
    {/* 导航 Tab */}
    <div className="reply-navigation">
      <ul className="nav-bar">
        <li className="nav-title">
          <span className="nav-title-text">评论</span>
          <span className="total-reply">{list.length}</span>
        </li>
        <li className="nav-sort">
          {tabs.map(item => (
            <div
              key={item.type}
              className={item.type === activeTab ? 'nav-item active' : 'nav-item'}
              onClick={() => onToggle(item.type)}
            >
              {item.text}
            </div>
          ))}
        </li>
      </ul>
    </div>

    {/* 评论列表 */}
    <div className="reply-list">
      {list.map(item => (
        <div key={item.rpid} className="reply-item">
          <div className="root-reply-avatar">
            <img className="bili-avatar-img" src={item.user.avatar} alt="" />
          </div>
          <div className="content-wrap">
            <div className="user-info">
              <div className="user-name">{item.user.uname}</div>
            </div>
            <div className="root-reply">
              <span className="reply-content">{item.content}</span>
              <div className="reply-info">
                <span className="reply-time">{item.ctime}</span>
                <span className="reply-time">点赞数:{item.like}</span>
                {user.uid === item.user.uid && (
                  <span className="delete-btn" onClick={() => onDelete(item.rpid)}>
                    删除
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

在这个 JSX 代码中,我们使用条件渲染来应用选中的 Tab 的高亮样式,并通过 onClick 事件绑定到 onToggle 函数,以实现 Tab 切换功能。评论列表的渲染则根据当前的排序方式显示评论项。

1. map 方法

tabs.map(item => (...)) 使用了 Array.prototype.map 方法遍历 tabs 数组,并为每个 item 返回一个 <div> 元素。map 方法会根据数组中的每个元素生成一个新的数组,新的数组中的每个元素是一个 <div> 元素。

2. key 属性

key={item.type}
  • 功能key 属性用于标识数组中每个元素的唯一性,以便 React 能够高效地更新和渲染列表。
  • 作用:这里使用 item.type 作为每个 <div> 元素的 key,因为 type 是唯一的('hot''time')。

3. className 动态赋值

className={item.type === activeTab ? 'nav-item active' : 'nav-item'}
  • 功能:根据当前活动的 Tab (activeTab) 动态设置 <div> 元素的 className
  • 作用:如果当前 item.type 等于 activeTab,则为该 <div> 元素添加 nav-item active 类,使其显示为活动状态(高亮)。否则,仅添加 nav-item 类。

4. onClick 事件处理器

onClick={() => onToggle(item.type)}
  • 功能:为 <div> 元素添加 onClick 事件处理器。
  • 作用:当用户点击某个 Tab 时,调用 onToggle 函数,并将当前 item.type 作为参数传递给 onToggle 函数,从而触发排序逻辑的切换。

5. item.text

{item.text}
  • 功能:在每个 <div> 元素内显示 item.text 的内容。
  • 作用:显示 Tab 文本,分别为“最热”和“最新”。

6. <li> 容器

<li className="nav-sort">
  ...
</li>
  • 功能:将所有生成的 <div> 元素包含在一个 <li> 元素内,并为其添加 nav-sort 类。
  • 作用:作为导航栏的一部分,用于包含和布局所有 Tab 选项。

四、进阶应用和实际案例

1. 高亮 Tab 和排序状态管理

在实际应用中,可能需要根据用户的操作保存和恢复排序状态。例如,在用户切换到“最新”标签后,我们可以保持这个状态,以便用户刷新页面后仍能看到上次选择的排序方式。这可以通过浏览器的本地存储(localStorage)来实现。

useEffect(() => {
  const savedTab = localStorage.getItem('activeTab') || 'hot';
  setActiveTab(savedTab);
}, []);

useEffect(() => {
  localStorage.setItem('activeTab', activeTab);
}, [activeTab]);

2. 多条件排序

在某些复杂场景下,可能需要进行多条件排序。例如,用户可能希望首先按点赞数排序,然后再按时间排序。这种情况下,可以扩展排序逻辑以支持多条件排序。

const onToggle = type => {
  setActiveTab(type);
  let newList;
  if (type === 'time') {
    newList = orderBy(list, ['ctime', 'like'], ['desc', 'desc']);
  } else {
    newList = orderBy(list, ['like', 'ctime'], ['desc', 'desc']);
  }
  setList(newList);
};

代码源


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1951468.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

五大设备制造商的 200 多种机型的安全启动功能完全失效

2012 年&#xff0c;一个由硬件和软件制造商组成的行业联盟采用了安全启动技术&#xff0c;以防范长期存在的安全威胁。这种威胁是恶意软件的幽灵&#xff0c;它可以感染 BIOS&#xff0c;即每次计算机启动时加载操作系统的固件。从那里&#xff0c;它可以保持不受检测和删除&a…

jenkins参数化构建在UI中定义脚本中使用

先看配置&#xff1a; 流水线脚本&#xff1a; pipeline {agent {//label "${server}"label "${28}"}stages {stage(Hello) {steps {echo "--------------------------"// 只有这个可以输出变量echo "${character_argument}"echo &q…

Pytorch使用教学5-视图view与reshape的区别

有同学后台留言问为什么view有时可对张量进行形变操作&#xff0c;有时就会报错&#xff1f;另外它和reshape功能好像一致&#xff0c;有什么区别呢&#xff1f;本文就带你了解PyTorch中视图的概念。 在PyTorch中对张量进行形变操作时&#xff0c;很多同学也会使用view方法&am…

kettle从入门到精通 第八十课 ETL之kettle kettle中的json对象字段写入postgresql中的json字段

场景&#xff1a;源数据库表为mysql的其中有json字段&#xff0c;通过kettle 查询出来 插入到目标数据库 postgresql中&#xff0c;对应的表中也有json字段。。但是报错&#xff0c;提示kettle查询出来是varchar的的字段&#xff0c;无法插入到目标数据库中。 1、创建测试表。 …

【VSCode实战】Golang无法跳转问题竟是如此简单

上一讲【VSCode实战】Go插件依赖无法安装 – 经云的清净小站 (skycreator.top)&#xff0c;开头说到了在VSCode中Golang无法跳转的问题&#xff0c;但文章的最后也没给出解决方案&#xff0c;只解决了安装Go插件的依赖问题。 解决了插件依赖问题&#xff0c;无法跳转的问题也离…

echo,tail ,飘号和重定向符

1. 输出指定内容 echo 语法; echo 输出的内容 较多内容使用 “ 双引号 ”&#xff0c; 相当于 printf &#xff1b; 2. 飘号 飘号&#xff0c;也就是我们通常所说的反引号&#xff0c;被飘号包括的内容会当作命令执行&#xff0c;常配合 echo 使用&#xff0c;输出结果为…

【python】python图书管理系统_普通用户+管理员菜单(源码+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

Docker安装 OpenResty详细教程

OpenResty 是一个基于 Nginx 的高性能 Web 平台&#xff0c;它集成了 Lua 脚本语言&#xff0c;使得开发者可以在 Nginx 服务器上轻松地进行动态 Web 应用开发。OpenResty 的核心目标是通过将 Nginx 的高性能与 Lua 的灵活性结合起来&#xff0c;提供一个强大且高效的 Web 开发…

IO多路复用——select

仅一个线程、进程处理并发 IO多路转接&#xff08;复用&#xff09;之select 跨平台适用linux&#xff0c;windows 底层&#xff1a;线性表 IO多路转接&#xff08;复用&#xff09;之poll 适用linux 底层&#xff1a;线性表 IO多路转接&#xff08;复用&#xff09;之epo…

微信小程序支付流程

前端需要做的事情&#xff1a; 生成平台订单&#xff1a;前端调用接口&#xff0c;向后端传递购买的商品信息、收货人信息&#xff0c;&#xff08;后端生成平台订单&#xff0c;返回订单编号&#xff09;获取预付单信息&#xff1a;将订单编号发送给后端后&#xff0c;&#x…

2024最新Selenium面试题(附带答案),建议收藏备用

一.你在TestNG中使用了哪些注解&#xff1f; TestBeforeSuiteAfterSuiteBeforeTestAfterTestBeforeClassAfterClassBeforeMethodAfterMethod 二.如何从Excel中读取数据&#xff1f; FileInputStream fs new FileInputStream(“excel文件路径”); Workbook wb WorkbookFact…

Web前端知识视频教程分享(五) Bootstrap

资料下载地址&#xff1a; https://545c.com/f/45573183-1336822373-45bb4f?p7526 (访问密码: 7526)

WordPress原创插件:自定义文章标题颜色

插件设置截图 文章编辑时&#xff0c;右边会出现一个标题颜色设置&#xff0c;可以设置为任何颜色 更新记录&#xff1a;从输入颜色css代码&#xff0c;改为颜色选择器&#xff0c;更方便&#xff01; 插件免费下载 https://download.csdn.net/download/huayula/89585192…

Xinstall揭秘:一键拉起服务如何助力App提升用户体验和下载转化率

在移动互联网时代&#xff0c;App的运营和推广显得尤为重要。而在这个过程中&#xff0c;如何提升用户体验和下载转化率成为了每个App运营者关注的焦点。今天&#xff0c;我们就来揭秘一下Xinstall的一键拉起服务&#xff0c;看看它是如何助力App提升用户体验和下载转化率的。 …

示例:WPF中如何处理TabControl页面绑定ItemsSource切换TabItem时UI数据没有持久保存的问题

一、目的&#xff1a;在WPF开发过程中&#xff0c;经常用到TabControl&#xff0c;也会遇到类似问题&#xff0c;用TabControl绑定数据源ItemsSource时&#xff0c;切换TabItem时&#xff0c;UI上的数据没有持久保存&#xff0c;本文介绍一种处理方式&#xff0c;可以做到缓存页…

解决学生技能短板:泰迪智能科技2024年中职大数据实验室,全面提升学生实践能力

一、中职院校现状及实验室建设背景 在当今信息化时代&#xff0c;大数据技术已成为国家战略发展的重要方向。中职院校作为我国职业教育体系的重要组成部分&#xff0c;肩负着培养高素质技术技能人才的重任。然而&#xff0c;目前我国中职院校在大数据教育方面存在以下问题&…

蓝桥强化宝典(4)Dijkstra

前言 Dijkstra算法&#xff08;迪杰斯特拉算法&#xff09;&#xff0c;又称狄克斯特拉算法&#xff0c;是由荷兰计算机科学家Edsger W. Dijkstra于1959年提出的。该算法主要用于在加权图中查找从一个起始节点到所有其他节点的最短路径&#xff0c;解决的是有权图中最短路径问题…

在线教育数仓项目(数据采集部分1)

文章目录 数据仓库概念项目需求及架构设计项目需求分析系统数据流程设计框架版本选型集群规模估算集群资源规划设计 数据生成模块目标数据页面事件曝光启动播放错误 数据埋点主流埋点方式&#xff08;了解&#xff09;埋点数据上报时机埋点数据日志结构 服务器和JDK准备服务器准…

C++(入门1)

C参考文档 Reference - C Reference C 参考手册 - cppreference.com cppreference.com 第一个C程序 #include<stdio.h> int main() {printf("Hello C\n");return 0; }由上述代码可知C是兼容C语言 第一个C标准程序 #include<iostream> using names…