jsx 案例练习 评论区渲染

练习案例源码地址

git源码后，安装依赖，npm install或者yarn  

然后 npm run start 运行起来

会有简易B站评论模板出现

 案例目标：完成 评论数据渲染、tab内容渲染、评论列表点赞和点踩 三个视图渲染

1、评论数据渲染

找数据，list

 找到需要遍历的标签 list-item

 大括号写表达式,里面以state.list拿到列表，通过map方法，把大模板放进去

 这是第一步，得到所有数据后的结构，还要补一个key，遍历的是谁在谁那加

结构有了，用户、评论、时间要完善

 时间呢？怎么弄，它在列表里是个new date,时间对象

 写个函数调用方法获取

function formatTime(time){
  //时间格式化 2023-8-16
  return `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`
}

 月份是0-11月，所以要在后面+1，否则显示上是前一个月

接下来是旁边的点赞点踩

用到动态类名控制，三元表达式

还剩一个按时间、热度排序 

active控制，同理可使用动态类名控制

这个案例练习的是jsx的语法，map遍历列表、动态类名控制，没有功能，慢慢学