网站开发的课程,公众号制作一个需要多少钱,字体大全,做的最好的微电影网站功能要求#xff1a;
1、渲染评论列表
2、删除评论功能#xff1a;只显示自己评论的删除按钮#xff1b;点击删除按钮#xff0c;删除当前评论#xff0c;列表中不再显示。
3、渲染导航Tab#xff08;最新 | 最热#xff09;和其 高亮实现
4、评论排序功能实现…功能要求
1、渲染评论列表
2、删除评论功能只显示自己评论的删除按钮点击删除按钮删除当前评论列表中不再显示。
3、渲染导航Tab最新 | 最热和其 高亮实现
4、评论排序功能实现最新按时间排序 | 最热按点赞数排序
核心思路
1、使用map方法对列表数据进行遍历渲染别忘记加key
2、使用useState维护评论列表
3、只显示自己评论删除按钮应当是一个条件渲染
4、删除功能点击删除按钮时传出唯一匹配项 id以id为条件对评论列表做 filter过滤。判断当前登录用户信息当中的uid 和 评论数据当中的uid 一样时才显示这条评论的删除按钮(user.id item.user.id)
5、Tab功能实现点击谁就把谁的 type独一无二的标识记录下来然后和遍历时的每一项的type 做匹配谁匹配到就设置负责高亮的类名。
6、评论区按序排列用到了lodash库的排序函数 源码 以及 详细代码注释 如下
// App.jsimport ./App.scss
import jayAvatar from ./images/jay.png
import ljAvatar from ./images/lj.png
import xsAvatar from ./images/xs.png
import React, { useState } from react
import _ from lodash// 评论列表的渲染和操作 1. 根据状态渲染评论列表 2. 删除评论// 评论列表数据
const defaultList [{// 评论idrpid: 3,// 用户信息user: {uid: 13258165,avatar: jayAvatar,uname: 周杰伦,},// 评论内容content: 哎哟不错哦,// 评论时间ctime: 10-18 08:15,like: 989,},{rpid: 2,user: {uid: 36080105,avatar: xsAvatar,uname: 许嵩,},content: 我寻你千百度 日出到迟暮,ctime: 11-13 11:29,like: 88,},{rpid: 1,user: {uid: 30009257,avatar: ljAvatar,uname: 李健,},content: 只是因为在人群中多看了你一眼,ctime: 10-19 09:00,like: 66,},
]
// 当前登录用户信息
const user {// 用户iduid: 30009257,// 用户头像avatar: jayAvatar,// 用户昵称uname: 李健,
}// 导航 Tab 的渲染和操作 1. 渲染导航 Tab 和高亮 2. 评论列表排序// 导航 Tab 数组
const tabs [{ type: hot, text: 最热 },{ type: time, text: 最新 },
]const App () {// 使用useState管理评论列表,默认值为按照点赞数降序的defaultList使用lodash库的orderBy方法const [commentList, setCommentList] useState(_.orderBy(defaultList, [like], [desc]))// 评论删除功能const handleDel (id) {console.log(id)// 对commentList进行过滤过滤掉id等于传入id的评论留下id不等于传入id的评论setCommentList(commentList.filter(item item.rpid ! id))}// tab切换功能// 1. 点击谁就把谁的唯一标识type记录下来// 2. 通过记录的type和每一项遍历时的type做匹配 控制激活类名的显示const [type, setType] useState(hot)const handleTabChange (type) {console.log(type)setType(type)// 基于列表的排序if (type hot) {// 最热 喜欢点赞数量降序// lodash函数库,desc降序排序setCommentList(_.orderBy(commentList, [like], [desc]))} else {// 最新 创建时间降序// lodash函数库,desc降序排序setCommentList(_.orderBy(commentList, [ctime], [desc]))}}return (div classNameapp{/* 导航 Tab */}div classNamereply-navigationul classNamenav-barli classNamenav-titlespan classNamenav-title-text评论/span{/* 评论数量 */}span classNametotal-reply{10}/span/lili classNamenav-sort{/* 高亮类名 active */}{tabs.map(item spankey{item.type}className{nav-item ${type item.type ? active : }}onClick {() handleTabChange(item.type)}{item.text}/span)}/li/ul/divdiv classNamereply-wrap{/* 发表评论 */}div classNamebox-normal{/* 当前用户头像 */}div classNamereply-box-avatardiv classNamebili-avatarimg classNamebili-avatar-img src{ljAvatar} alt用户头像 //div/divdiv classNamereply-box-wrap{/* 评论框 */}textareaclassNamereply-box-textareaplaceholder发一条友善的评论/{/* 发布按钮 */}div classNamereply-box-senddiv classNamesend-text发布/div/div/div/div{/* 评论列表 */}div classNamereply-list{/* 评论项 */}{commentList.map(item (div classNamereply-item key{item.rpid}{/* 头像 */}div classNameroot-reply-avatardiv classNamebili-avatarimgclassNamebili-avatar-imgaltsrc {item.user.avatar}//div/divdiv classNamecontent-wrap{/* 用户名 */}div classNameuser-infodiv classNameuser-name{item.user.uname}/div/div{/* 评论内容 */}div classNameroot-replyspan classNamereply-content{item.content}/spandiv classNamereply-info{/* 评论时间 */}span classNamereply-time{item.ctime}/span{/* 评论数量 */}span classNamereply-time点赞数:{item.like}/span{/* 显示条件 user.id item.user.id */}{user.uid item.user.uid span classNamedelete-btn onClick{() handleDel(item.rpid)}删除/span}/div/div/div/div) )}div classNamereply-item{/* 头像 */}div classNameroot-reply-avatardiv classNamebili-avatarimgclassNamebili-avatar-imgalt//div/div/div/div/div/div)
}export default App
//App.scss.app {width: 80%;margin: 50px auto;
}.reply-navigation {margin-bottom: 22px;.nav-bar {display: flex;align-items: center;margin: 0;padding: 0;list-style: none;.nav-title {display: flex;align-items: center;width: 114px;font-size: 20px;.nav-title-text {color: #18191c;font-weight: 500;}.total-reply {margin: 0 36px 0 6px;color: #9499a0;font-weight: normal;font-size: 13px;}}.nav-sort {display: flex;align-items: center;color: #9499a0;font-size: 13px;.nav-item {cursor: pointer;:hover {color: #00aeec;}:last-child::after {display: none;}::after {content: ;display: inline-block;height: 10px;width: 1px;margin: -1px 12px;background-color: #9499a0;}}.nav-item.active {color: #18191c;}}}
}.reply-wrap {position: relative;
}
.box-normal {display: flex;transition: 0.2s;.reply-box-avatar {display: flex;align-items: center;justify-content: center;width: 80px;height: 50px;}.reply-box-wrap {display: flex;position: relative;flex: 1;.reply-box-textarea {width: 100%;height: 50px;padding: 5px 10px;box-sizing: border-box;color: #181931;font-family: inherit;line-height: 38px;background-color: #f1f2f3;border: 1px solid #f1f2f3;border-radius: 6px;outline: none;resize: none;transition: 0.2s;::placeholder {color: #9499a0;font-size: 12px;}:focus {height: 60px;background-color: #fff;border-color: #c9ccd0;}}}.reply-box-send {position: relative;display: flex;flex-basis: 86px;align-items: center;justify-content: center;margin-left: 10px;border-radius: 4px;cursor: pointer;transition: 0.2s; .send-text {position: absolute;z-index: 1;color: #fff;font-size: 16px;}::after {position: absolute;width: 100%;height: 100%;background-color: #00aeec;border-radius: 4px;opacity: 0.5;content: ;}:hover::after {opacity: 1;}}
}
.bili-avatar {position: relative;display: block;width: 48px;height: 48px;margin: 0;padding: 0;border-radius: 50%;
}
.bili-avatar-img {position: absolute;top: 50%;left: 50%;display: block;width: 48px;height: 48px;object-fit: cover;border: none;border-radius: 50%;image-rendering: -webkit-optimize-contrast;transform: translate(-50%, -50%);
}// 评论列表
.reply-list {margin-top: 14px;
}
.reply-item {padding: 22px 0 0 80px;.root-reply-avatar {position: absolute;left: 0;display: flex;justify-content: center;width: 80px;cursor: pointer;}.content-wrap {position: relative;flex: 1;::after {content: ;display: block;height: 1px;width: 100%;margin-top: 14px;background-color: #e3e5e7;}.user-info {display: flex;align-items: center;margin-bottom: 4px;.user-name {height: 30px;margin-right: 5px;color: #61666d;font-size: 13px;line-height: 30px;cursor: pointer;}}.root-reply {position: relative;padding: 2px 0;color: #181931;font-size: 15px;line-height: 24px;.reply-info {position: relative;display: flex;align-items: center;margin-top: 2px;color: #9499a0;font-size: 13px;.reply-time {width: 86px;margin-right: 20px;}.reply-like {display: flex;align-items: center;margin-right: 19px;.like-icon {width: 14px;height: 14px;margin-right: 5px;color: #9499a0;background-position: -153px -25px;:hover {background-position: -218px -25px;}}.like-icon.liked {background-position: -154px -89px;}}.reply-dislike {display: flex;align-items: center;margin-right: 19px;.dislike-icon {width: 16px;height: 16px;background-position: -153px -153px;:hover {background-position: -217px -153px;}}.dislike-icon.disliked {background-position: -154px -217px;}}.delete-btn {cursor: pointer;:hover {color: #00aeec;}}}}}
}.reply-none {height: 64px;margin-bottom: 80px;color: #99a2aa;font-size: 13px;line-height: 64px;text-align: center;
}// index.jsimport { createRoot } from react-dom/client
import App from ./Appconst root createRoot(document.querySelector(#root))root.render(App /)
