【React】评论案例列表渲染和删除功能

目录

B站评论案例

一、渲染评论列表

二、删除评论实现

---

B站评论案例

        

1.渲染评论列表

2.删除评论实现

3.渲染导航Tab和高亮实现

4.评论列表排序功能实现

一、渲染评论列表

核心思路：

        1.使用useState维护评论列表

        2.使用map方法对列表数据进行遍历渲染（别忘了加key）

二、删除评论实现

需求:

        1.只有自己的评论才显示删除按钮

        2. 点击删除按钮,删除当前评论,列表中不再显示

核心思路

        1.删除显示-条件渲染

        2.删除功能-拿到当前项id以id为条件对评论列表做filter过滤，filter条件里写的就是要保留下来的

import { useState } from "react";
import "./App.scss";
import avatar from "./images/bozai.png";/*** 评论列表的渲染和操作** 1. 根据状态渲染评论列表* 2. 删除评论*/// 评论列表数据
const defaultList = [{// 评论idrpid: 3,// 用户信息user: {uid: "13258165",avatar: "",uname: "周杰伦",},// 评论内容content: "哎哟，不错哦",// 评论时间ctime: "10-18 08:15",like: 88,},{rpid: 2,user: {uid: "36080105",avatar: "",uname: "许嵩",},content: "我寻你千百度 日出到迟暮",ctime: "11-13 11:29",like: 88,},{rpid: 1,user: {uid: "30009257",avatar,uname: "黑马前端",},content: "学前端就来黑马",ctime: "10-19 09:00",like: 66,},
];
// 当前登录用户信息
const user = {// 用户iduid: "30009257",// 用户头像avatar,// 用户昵称uname: "黑马前端",
};/*** 导航 Tab 的渲染和操作** 1. 渲染导航 Tab 和高亮* 2. 评论列表排序*  最热 => 喜欢数量降序*  最新 => 创建时间降序*/// 导航 Tab 数组
const tabs = [{ type: "hot", text: "最热" },{ type: "time", text: "最新" },
];const App = () => {//渲染评论列表//1.使用useState维护List。数据只要影响视图的变化就使用setStateconst [commentList, setCommentList] = useState(defaultList);//删除功能const handleDel = (id) => {console.log(id);//对commentList过滤处理setCommentList(commentList.filter((item) => item.rpid !== id));};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">{10}</span></li><li className="nav-sort">{/* 高亮类名： active */}<span className="nav-item">最新</span><span className="nav-item">最热</span></li></ul></div><div className="reply-wrap">{/* 发表评论 */}<div className="box-normal">{/* 当前用户头像 */}<div className="reply-box-avatar"><div className="bili-avatar"><img className="bili-avatar-img" src={avatar} alt="用户头像" /></div></div><div className="reply-box-wrap">{/* 评论框 */}<textareaclassName="reply-box-textarea"placeholder="发一条友善的评论"/>{/* 发布按钮 */}<div className="reply-box-send"><div className="send-text">发布</div></div></div></div>{/* 评论列表 */}<div className="reply-list">{/* 评论项 */}{commentList.map((item //使用map方法对列表数据进行遍历渲染) => (<div key={item.rpid} className="reply-item">{/* 头像 */}<div className="root-reply-avatar"><div className="bili-avatar"><imgclassName="bili-avatar-img"alt=""src={item.user.avatar}/></div></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.id === item.user.id 就是自己的评论 */}{user.uid === item.user.uid && (<spanclassName="delete-btn"onClick={() => handleDel(item.rpid)}>删除</span>)}</div></div></div></div>))}</div></div></div>);
};export default App;