jsx 案例练习 评论区渲染

news2024/11/18 7:39:06

练习案例源码地址

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

然后 npm run start 运行起来

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

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

1、评论数据渲染

找数据,list

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

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

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

<div className="list-item" key={item.id}>

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

 

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

 写个函数调用方法获取

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

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

接下来是旁边的点赞点踩

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

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

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

 

 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/886811.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PINN神经网络源代码解析(pyTorch)

参考文献 PINN(Physics-informed Neural Networks)的原理部分可参见https://maziarraissi.github.io/PINNs/ 考虑Burgers方程&#xff0c;如下图所示&#xff0c;初始时刻u符合sin分布&#xff0c;随着时间推移在x0处发生间断. 这是一个经典问题&#xff0c;可使用pytorch通过…

系统架构设计师-信息安全技术(1)

目录 一、信息安全基础 1、信息安全五要素 2、网络安全漏洞 3、网络安全威胁 4、安全措施的目标 二、信息加解密技术 1、对称加密 2、非对称加密 3、加密算法对比 三、密钥管理技术 1、数字证书 2、PKI公钥体系 四、访问控制技术 1、访问控制基本模型 2、访问控制的实现技术…

群晖安装 frpc

群晖安装 frpc 博主博客 https://blog.uso6.comhttps://blog.csdn.net/dxk539687357 写该文章之前&#xff0c; 我尝试过使用 “任务计划” 设置开机启动 frpc&#xff0c; 但是失败了。 最后尝试使用 docker 开机启动 frpc 才成功&#xff0c; 因此本文主要介绍使用 docker …

爬虫逆向实战(十三)--某课网登录

一、数据接口分析 主页地址&#xff1a;某课网 1、抓包 通过抓包可以发现登录接口是user/login 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现有一个password加密参数&#xff0c;还有一个browser_key这个可以写死不需要关心 请求头…

Lodash——使用与实例

1. 简介 Lodash是一个一致性、模块化、高性能的JavaScript实用库。Lodash通过降低array、number、objects、string等等的使用难度从而让JavaScript变得简单。Lodash的模块方法&#xff0c;非常适用于&#xff1a; 遍历array、object 和 string对值进行操作和检测创建符合功能的…

注册中心Eureka和Nacos,以及负载均衡Ribbon

1.初识微服务 1.1.什么是微服务 微服务&#xff0c;就是把服务拆分成为若干个服务&#xff0c;降低服务之间的耦合度&#xff0c;提供服务的独立性和灵活性。做到高内聚&#xff0c;低耦合。 1.2.单体架构和微服务架构的区别&#xff1a; 单体架构&#xff1a;简单方便&#…

【干货】通过Bootstrap框架添加下拉框到导航栏

最终效果展示详细步骤及代码1、获取相关代码2、引入CSS和JavaScript文件3、全部代码 最终效果展示 详细步骤及代码 1、获取相关代码 https://v3.bootcss.com/components/#navbar-default 本文用到代码为 <nav class"navbar navbar-default"><div class&…

第六阶|见道明心的笔墨(上)从书法之美到生活之美——林曦老师的线上直播书法课

如果你有需要&#xff0c;可以找我的&#xff0c;我这边有老师的所有课程 如果你有需要&#xff0c;可以找我的&#xff0c;我这边有老师的所有课程

零售行业供应链管理核心KPI指标(二) – 线上订单履行周期

一般品牌零售商有一个大的渠道就是全国连锁的商超、大卖场&#xff0c;非常重要的渠道&#xff0c;要去铺货。同类型的产品都在竞争这个大渠道&#xff0c;但商超、大卖场在这类产品的容量是有限的&#xff0c;所以各个品牌就要去争夺整个容量&#xff0c;看谁在有限的容量里占…

最小二乘线性拟合FC(SCL计算源代码)

采用PLC等微控制器采集一些线性传感器数据时&#xff0c;如果已知线性关系&#xff0c;我们可以利用直线方程求解。具体的算法公式和讲解大家可以查看下面相关文章&#xff1a; PLC模拟量采集算法数学基础&#xff08;线性传感器&#xff09;_plc3秒采集一次模拟量_RXXW_Dor的…

expert systems with applications latex使用、投稿、合集(超详细)

目录 一、main.tex 1、框架 2、图片 3、表格 4、公式 5、文献引用 6、引用文献高亮 及 其他需要导入的包 7、特殊符号 比如 ✔ ∈ 二、投稿 1、orcid 身份码 2、.bib 文件设置为 manuscript 3、Cover Letter 4、declaration of interest statement 5、模板及其…

分享一个恒流源和恒压源电路,可实现恒压、恒流充放电

通过控制输出DA-IOUT1,DA-VOUT1电流和电压DA的大小&#xff0c;及继电器控制和CH1I,CH1V的采用反馈&#xff0c;该电路可实现&#xff0c;恒流充电&#xff0c;恒压充电&#xff0c;恒流恒压充电&#xff0c;恒流放电&#xff0c;恒阻充电&#xff0c;恒功率充电等充放电模式&a…

01_YS_LED_USART1_KEY_Test_Demo

1.硬件设计参考图 参考&#xff1a;00_YS_硬件电路图_往事不可追_来日不方长的博客-CSDN博客 2.配置LED 2.1代码部分 代码初始化部分如下图MX自动生成&#xff1a; // main.h 中/* Private defines -----------------------------------------------------------*/ #define…

Wordcloud | 风中有朵雨做的‘词云‘哦!~

1写在前面 今天可算把key搞好了&#xff0c;不得不说&#x1f3e5;里手握生杀大权的人&#xff0c;都在自己的能力范围内尽可能的难为你。&#x1f602; 我等小大夫也是很无奈&#xff0c;毕竟奔波霸、霸波奔是要去抓唐僧的。 &#x1f910; 好吧&#xff0c;今天是词云&#x…

Vue3 Router路由单页面跳转简单应用

去官网学习→介绍 | Vue Router cd 到项目 安装 Router &#xff1a; cnpm install --save vue-router 或着 创建项目时勾选Router vue create vue-demo <i> to invert selection, and <enter> to proceed)(*) Babel( ) TypeScript(*) Progressive Web …

《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作

文章目录 目录 系列文章目录 1.《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用 2.《Vue3实战》用路由实现跳转登录、退出登录以及路由全局守护 3.《vue3实战》运用Checkbox复选框实现单选多选的试卷展现&#xff08;本文&#xff09; 文章目录 前言 radio是什…

【探索Linux】—— 强大的命令行工具 P.3(Linux开发工具 vim)

阅读导航 前言vim简介概念特点 vim的相关指令vim命令模式(Normal mode)相关指令插入模式(Insert mode)相关指令末行模式(last line mode)相关指令 简单vim配置&#xff08;附配置链接&#xff09;温馨提示 前言 前面我们讲了C语言的基础知识&#xff0c;也了解了一些数据结构&…

observer与qt信号槽的区别

observer类图(应用) 定义/区别/注意事项 点击截图后可放大显示,也可图片另存为&#xff0c;这个技术讨论是来接受批评的。 参考&#xff1a;

专访 BlockPI:共建账户抽象未来的新一代 RPC 基础设施

在传统 RPC 服务板块上&#xff0c;开发者一直饱受故障风险、运行环境混乱等难题的折磨。实现 RPC 服务的去中心化&#xff0c;且保持成本优势和可扩展性&#xff0c;始终是区块链基础设施建设的重要命题之一。从 2018 年观察中心化 RPC 供应商服务现状开始&#xff0c;BlockPI…

设计模式之构建器(Builder)C++实现

构建器提出 在软件功能开发中&#xff0c;有时面临“一个复杂对象”的创建工作&#xff0c;该对象的每个功能接口由于需求的变化&#xff0c;会使每个功能接口发生变化&#xff0c;但是该对象使用每个功能实现一个接口的流程是稳定的。构建器就是解决该类现象的。构建就是定义…