React实现二级评论

1. 什么是二级评论

图片来源–blackfrog的掘金文章
在这里插入图片描述
口语化的讲当我发布一个评论的时候就是一级评论,当我回复我发布的评论的时候就是二级评论并且将所有回复二级评论的评论也归于二级评论。

2. 二级评论功能的实现逻辑

在这里后端设计了四个接口分别是

  • 获取所有一级评论
  • 获取所有二级评论
  • 发布一级评论
  • 回复二级评论

在实现的时候首先调用接口获取一级评论,之后一级评论下面显示<回复–XX条–>点击之后触发调用二级评论的请求,当我获取发布评论输入框里面的文字,点击发布评论的时候默认的是一级评论
当我点击一级评论的时候输入框里会添加【@用户名 输入的内容】这里会进行二级评论的发布
同时还有删除评论的功能

  • 【需要注意评论删除的时候需要进行添加的判断——只能删除自己发布的评论】
// 在react 中使用redux进行共享数据的管理const {reviewListContext,secondaryReviewListContext,} = useAppSelector((state) => ({reviewListContext: state.release.reviewList, // 获取一级评论secondaryReviewListContext: state.release.getSecondaryReviewList, // 获取二级评论}))
{reviewListContext.map((item) => (<><View>{/* 一级评论 */}<Rowgutter="20"className={`comment-row ${isClicked && selectedReviewId === item.id ? 'clicked' : ''}`}onClick={() => selLevel1Review(item)}><Col span="4" className="comment-avatar"><Imageradius="50%"width="30px"height="30px"src={item.User.avatar}/></Col><Col span="20" className="comment-content"><View><View className="size-32">{item.User.username}</View></View><Text className="comment-text">{item.content}</Text></Col></Row>{/* 二级评论 */}{fetchedSecondaryReviews[item.id] && fetchedSecondaryReviews[item.id].map((reply) => (<Viewkey={reply.id}className="comment-item reply-comment-item"style={{ margin: '0 0 20px 40px' }}><Rowgutter="20"onClick={() => selLevel2Review(reply)} // 假设selLevel2Review是处理二级评论的函数className="comment-row"><Col span="4" className="comment-avatar"><Imageradius="50%"width="30px"height="30px"src={reply.User.avatar}/></Col><Col span="20" className="comment-content"><View><View className="size-32">{reply.User.username}</View></View><Text className="comment-text">{reply.content}</Text></Col></Row></View>))}</View></>))
}

上面的代码中就是二级评论的大概逻辑了,还有可以完善补充的地方!

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

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

相关文章

jdk1.8升级到jdk11遇到的各种问题

一、第三方依赖使用了BASE64Decoder 如果项目中使用了这个类 sun.misc.BASE64Decoder&#xff0c;就会导致错误&#xff0c;因为再jdk11中&#xff0c;该类已经被删除。 Caused by: java.lang.NoClassDefFoundError: sun/misc/BASE64Encoder 当然这个类也有替换方式&#xf…

第 27 篇 : 搭建maven私服nexus

官网文档 1. 下载应该很慢, 最好是能翻墙 nexus-3.69.0-02-java8-unix.tar.gz 2. 上传到/usr/local/src, 解压及重命名 tar -zxvf nexus-3.69.0-02-java8-unix.tar.gz rm -rf nexus-3.69.0-02-java8-unix.tar.gz mv nexus-3.69.0-02 nexus ls3. 修改配置 cd /usr/local/sr…

作 业 二

cs与msf权限传递 1、进入cs界面,首先来到 Cobalt Strike 目录下&#xff0c;启动 Cobalt Strike 服务端 2、用客户端进 3、建立监听 4、生成脚本文件 5、开启服务&#xff0c;让win_2012 下载木马文件并运行 6、显示已经获取到了win的权限 转到Metasploit Framework 7、进去m…

智慧仓储的秘密武器:数据可视化的应用

智慧仓储中数据可视化是如何应用的&#xff1f;在现代物流和供应链管理中&#xff0c;智慧仓储已成为企业提升效率、降低成本和优化运营的重要手段。而数据可视化作为智慧仓储的重要工具&#xff0c;通过将复杂的数据转化为直观、易理解的图表和图形&#xff0c;极大地提升了仓…

MySQL实训--原神数据库

原神数据库 er图DDL/DML语句查询语句存储过程/触发器 er图 DDL/DML语句 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0;DROP TABLE IF EXISTS artifacts; CREATE TABLE artifacts (id int NOT NULL AUTO_INCREMENT,artifacts_name varchar(255) CHARACTER SET utf8 COLLATE …

玩机进阶教程----MTK芯片使用Maui META修复基带 改写参数详细教程步骤解析

目前mtk芯片与高通芯片在主流机型 上使用比较普遍。但有时候版本更新或者误檫除分区等等原因会导致手机基带和串码丢失的故障。mtk芯片区别与高通。在早期mtk芯片中可以使用工具SN_Writer_Tool读写参数。但一些新版本机型兼容性不太好。今天使用另外一款工具来演示mtk芯片改写参…

Cesium 基本概念:创建实体和相机控制

基本概念 Entity // 创建一个实体 const entity_1 viewer.entities.add({position: new Cesium.Cartesian3(0, 0, 10000000),point: {pixelSize: 10,color: Cesium.Color.BLUE} });// 通过经纬度创建实体 const position Cesium.Cartesian3.fromDegrees(180.0, 0.0); // 创…

MySQL——自连接及联表查询练习

自连接 自己的表和自己的表连接&#xff0c;核心&#xff1a;一张表拆为两张一样的表即可。 父类&#xff1a; categoryidcategoryName2信息技术3软件开发5美术设计 子类&#xff1a; pidcategoryidcategoryName34数据库28办公信息36web开发57ps技术 子类的pid 父类的cate…

计算机缺失d3dx9_43.dll的多种解决方法,哪种更推荐使用

我在使用计算机时遇到了一个问题&#xff0c;系统提示我丢失了d3dx9_43.dll文件。丢失d3dx9_43.dll文件通常是由于DirectX组件未正确安装或损坏所致&#xff0c;这直接影响到依赖于DirectX的游戏和应用的运行。经过一番搜索和尝试&#xff0c;我找到了多种修复这个问题的方法&a…

2024最新SCI期刊影响因子发布(JCR2023)(含Top100榜单)

Clarivate Analytics&#xff08;科睿唯安&#xff09;2024年度《期刊引证报告》&#xff08;Journal Citation Reports&#xff0c;简称JCR&#xff09;发布了SCI期刊2023年影响因子(IF)。该指数备受访问学者、联培博士及博士后研究者关注。今天知识人网小编就简要介绍最新SCI…

【STM32 RTC实时时钟如何配置!超详细的解析和超简单的配置,附上寄存器操作】

STM32 里面RTC模块和时钟配置系统(RCC_BDCR寄存器)处于后备区域&#xff0c;即在系统复位或从待机模式唤醒后&#xff0c;RTC的设置和时间维持不变。因为系统对后备寄存器和RTC相关寄存器有写保护&#xff0c;所以如果想要对后备寄存器和RTC进行访问&#xff0c;则需要通过操作…

一文详解:什么是企业邮箱?最全百科

什么是企业邮箱&#xff1f;企业邮箱即绑定企业自有域名作为邮箱后缀的邮箱&#xff0c;是企业用于内部成员沟通和客户沟通的邮箱系统。 一、企业邮箱概念拆解 1.什么是企业邮箱&#xff1f; 企业邮箱即使用企业域名作为后缀的邮箱系统。它不仅提供专业的电子邮件收发功能&a…

【学习】使用PyTorch训练与评估自己的ResNet网络教程

参考&#xff1a;保姆级使用PyTorch训练与评估自己的ResNet网络教程_训练自己的图像分类网络resnet101 pytorch-CSDN博客 项目地址&#xff1a;GitHub - Fafa-DL/Awesome-Backbones: Integrate deep learning models for image classification | Backbone learning/comparison…

PyScada(四)构建用户 HMI

构建用户 HMI&#xff08;前端&#xff09;的简短说明 在后端HMI部分&#xff1a; 图表&#xff0c;添加新图表页面&#xff0c;添加页面Widget&#xff0c;添加一个 Widget&#xff0c;在 Page 下选择您在 2 中添加的页面&#xff0c;并在Content下选择1 中的图表。小部件控…

【M1/M2】详细说明Parallels Desktop虚拟机的安装使用

希望文章能给到你启发和灵感~ 如果觉得有帮助的话,点赞+关注+收藏支持一下博主哦~ 阅读指南 开篇说明什么是Paralles Desktop一、基础环境说明1.1 硬件环境1.2 软件环境二、安装Parallels DeskTop2.1 下载软件安装包三、Parallels 下配置Windows 11 系统3.1 Windows 11安装3…

PostgreSQL 简介与基础(一)

1. 什么是 PostgreSQL 1.1 概述 PostgreSQL&#xff08;常简称为Postgres&#xff09;是一种功能强大的开源关系型数据库管理系统&#xff08;RDBMS&#xff09;。它以其可靠性、强大的功能和符合标准的特性著称。PostgreSQL 支持大部分 SQL 标准&#xff0c;并且具有许多现代…

护网面试内容

1.自我介绍 2.如何判断是不是误判 分析请求、响应内容&#xff0c;判断是否攻击成功首先看告警事件名称判断是网络攻击事件还是web攻击事件&#xff0c;网络攻击事件&#xff1a;定位五元组信息&#xff08;源IP、目的IP、源端口、目的端口、协议&#xff09;&#xff0c;对整…

Docker系列之安全

Docker的安全前言一、Docker 容器与虚拟机的区别 1. 隔离与共享 2. 性能与损耗二、Docker 存在的安全问题 1.Docker 自身漏洞 2.Docker 源码问题三、 Docker 架构缺陷与安全机制 1. 容器之间的局域网攻击 2. DDoS 攻击耗尽资源 3. 有漏…

Vue_cli搭建过程项目创建

概述 vue-cli 官方提供的一个脚手架&#xff0c;用于快速生成一个 vue 的项目模板&#xff1b;预先定义 好的目录结构及基础代码&#xff0c;就好比咱们在创建 Maven 项目时可以选择创建一个 骨架项目&#xff0c;这个骨架项目就是脚手架&#xff0c;我们的开发更加的快速&am…

uni-app的showModal提示框,进行删除的二次确认,可自定义确定或取消操作

实现效果&#xff1a; 此处为删除的二次确认示例&#xff0c;点击删除按钮时出现该提示&#xff0c;该提示写在js script中。 实现方式&#xff1a; 通过uni.showModal进行提示&#xff0c;success为确认状态下的操作自定义&#xff0c;此处调用后端接口进行了删除操作&#…