目录
B站评论案例
1.渲染评论列表
2.删除评论实现
3.渲染导航Tab和高亮实现
4.评论列表排序功能实现
一、渲染评论列表
核心思路：
1.使用useState维护评论列表
2.使用map方法对列表数据进行遍历渲染（别忘了加key）
二、删除评论实现
需求:
1.只有自己的评论才显示删除按钮
- 点击删除按钮,删除当前评论,列表中不再显示
核心思路
1.删除显示-条件渲染
2.删除功能-拿到当前项id以id为条件对评论列表做filter过滤，filter条件里写的就是要保留下来的
import { useState } from "react";
import "./App.scss";
import avatar from "./images/bozai.png";
/**
* 评论列表的渲染和操作
*
* 1. 根据状态渲染评论列表
* 2. 删除评论
*/
// 评论列表数据
const defaultList = [
{
// 评论id
rpid: 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 = {
// 用户id
uid: "30009257",
// 用户头像
avatar,
// 用户昵称
uname: "黑马前端",
};
/**
* 导航 Tab 的渲染和操作
*
* 1. 渲染导航 Tab 和高亮
* 2. 评论列表排序
* 最热 => 喜欢数量降序
* 最新 => 创建时间降序
*/
// 导航 Tab 数组
const tabs = [
{ type: "hot", text: "最热" },
{ type: "time", text: "最新" },
];
const App = () => {
//渲染评论列表
//1.使用useState维护List。数据只要影响视图的变化就使用setState
const [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">
{/* 评论框 */}
<textarea
className="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">
<img
className="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 && (
<span
className="delete-btn"
onClick={() => handleDel(item.rpid)}
>
删除
</span>
)}
</div>
</div>
</div>
</div>
)
)}
</div>
</div>
</div>
);
};
export default App;