抚顺您做煮火锅网站,网站建设和网页设计视频教程,服装网页设计图,常州网签备案查询/*** 导航 Tab 的渲染和操作** 1. 渲染导航 Tab 和高亮* 2. 评论列表排序* 最热 喜欢数量降序* 最新 创建时间降序* 1.点击记录当前type* 2.通过记录type和当前list中的type 匹配*/ import ./App.scss
import avatar from ./images/bozai.png
import {useState} … /*** 导航 Tab 的渲染和操作** 1. 渲染导航 Tab 和高亮* 2. 评论列表排序* 最热 喜欢数量降序* 最新 创建时间降序* 1.点击记录当前type* 2.通过记录type和当前list中的type 匹配*/ import ./App.scss
import avatar from ./images/bozai.png
import {useState} from react;
/*** 评论列表的渲染和操作** 1. 根据状态渲染评论列表* 2. 删除评论*/// 评论列表数据
const list [{// 评论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: 123,ctime: 10-19 09:00,like: 66,},
]
// 当前登录用户信息
const user {// 用户iduid: 30009257,// 用户头像avatar,// 用户昵称uname: 前端,
}/*** 导航 Tab 的渲染和操作** 1. 渲染导航 Tab 和高亮* 2. 评论列表排序* 最热 喜欢数量降序* 最新 创建时间降序* 1.点击记录当前type* 2.通过记录type和当前list中的type 匹配*/
// 导航 Tab 数组
const tabs [{ type: hot, text: 最热 },{ type: time, text: 最新 },
]const App () {// * 1)使用useState维护// * 2使用map方法对列表遍历const [commentList,setList] useState(list)const [type,setType] useState(hot)const handleTabChange (type){setType(type)}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(span key{item.type}onClick{()handleTabChange(item.type)}className{nav-item ${type item.typeactive}}{item.text}/span))}/li/ul/divdiv classNamereply-wrap{/* 发表评论 */}div classNamebox-normal{/* 当前用户头像 */}div classNamereply-box-avatardiv classNamebili-avatarimg classNamebili-avatar-img src{avatar} 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 key{item.rpid} classNamereply-item{/* 头像 */}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}/spanspan classNamedelete-btn/span/div/div/div/div))}/div/div/div)
}export default App
