react学习笔记——4. 虚拟dom中处理动态数据

如下需求

在这里插入图片描述

  • 方式1: 直接在ul中使用{data},是可以遍历数据的,然后如果将data改成下面形式,也是可以实现的。但是如果data是一个对象,则不能便利。
const data = [<li>Angular</li>, <li>React</li>, <li>Vue</li>]
  • 方式2: 使用data.map处理,并返回数据,这里需要注意返回的标签中需要有key,否则会有警告,这里暂且将key设置为遍历的idx,但是其实是有问题的,以后会修改。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 这是进行移动端适配的 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsx小练习</title></head><body><!-- 准备“容器” --><div id="test"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">// 模拟数据const data = ["Angular", "React", "Vue"]// 1、创建虚拟domconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item, idx) => {return <li key={idx}>{item}</li>})}</ul></div>)// 2、渲染虚拟dom到页面ReactDOM.render(VDOM, document.getElementById("test"))/*** 方式1:*      直接在ul中使用{data},是可以遍历数据的,然后如果将data改成下面形式,也是可以实现的。但是如果data是一个对象,则不能便利。*      const data = [<li>Angular</li>, <li>React</li>, <li>Vue</li>]* 方式2:*      使用data.map处理,并返回数据,这里需要注意返回的标签中需要有key,否则会有警告,这里暂且将key设置为遍历的idx,但是其实是有问题的,以后会修改。*/</script>
</body></html>

注意: 这里需要注意虚拟标签中能书写的都是表达式,不是js代码。表达式是指一个值,可以用变量进行接收。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSDN 直播:腾讯云大数据 ES 结合 AI 大模型与向量检索的新一代云端检索分析引擎 8月-8号 19:00-20:30

本次沙龙围绕腾讯云大数据ES产品展开&#xff0c;重点介绍了腾讯云ES自研的存算分离技术&#xff0c;以及能与AI大模型和文本搜索深度结合的高性能向量检索能力。同时&#xff0c;本次沙龙还将为我们全方位介绍腾讯云ES重磅推出的Elasticsearch Serverless服务&#xff0c;期待…

国产航顺HK32F030M: 内部参考电压

HK32F030MF4P6 用户手册 内部参考电压 adc.c #include "bsp_adc.h"/*** brief ADC GPIO 初始化* param 无* retval 无*/ static void ADCx_GPIO_Config(void) {GPIO_InitTypeDef GPIO_InitStructure;// 打开 ADC IO端口时钟ADC_GPIO_AHBxClock_FUN ( ADC_GPIO_C…

使用go-zero快速构建微服务

本文是对 使用go-zero快速构建微服务[1]的亲手实践 编写API Gateway代码 mkdir bookstore && cd bookstorego mod init bookstore mkdir api && goctl api -o api/bookstore.api syntax "v1"info(title: "xx使用go-zero"desc: "xx用…

Linux 基础篇(六)sudo和添加信任用户

一、sudo 1.是什么&#xff1f; 给被信任的普通用户授权&#xff0c;让被信任的普通用户能执行root用户才能执行的命令的一个命令。 2.为什么&#xff1f; 很多时候我们要在被信任的普通用户下执行一些root用户才能执行的命令&#xff0c;如 yum… 所以需要有一个命令能给普通用…

28 | Boss直聘数据分析

针对boss直聘网的招聘信息,然后分析互联网发展排名前十的城市在互联网方面职位的薪水,学历要求,经验要求,等等信息。 准备从以下几个方面进行分析: (1)各个城市的平均工资 (2)各个学历的平均工资 (3)各个岗位的平均工资 (4)不同工作经验要求的工资 (5)各个经验…

阿里云Windows服务器怎么安装多个网站?

本文阿里云百科介绍如何在Windows Server 2012 R2 64位系统的ECS实例上使用IIS服务器搭建多个Web站点。本教程适用于熟悉Windows操作系统&#xff0c;希望合理利用资源、统一管理站点以提高运维效率的用户。比如&#xff0c;您可以在一台云服务器上配置多个不同分类的博客平台或…

Linux 发行版 Debian 12.1 发布

导读在今年 6 月初&#xff0c;Debian 12“bookworm”发布&#xff0c;而日前 Debian 迎来了 12.1 版本&#xff0c;主要修复系统用户创建等多个安全问题。 Debian 是最古老的 GNU / Linux 发行版之一&#xff0c;也是许多其他基于 Linux 的操作系统的基础&#xff0c;包括 Ub…

Java内存模型

Java内存模型全称JMM&#xff08;Java Memory Model&#xff09; 内存主要有堆和栈组成 下面来一段demo代码详细讲解堆栈的作用&#xff0c;以及流程 public class Employee {private String name;private Integer age;private Department department;public Employee(){}pub…

无人驾驶实战-第十二课(强化学习自动驾驶系统)(完)

在七月算法上报了《无人驾驶实战》课程&#xff0c;老师讲的真好。好记性不如烂笔头&#xff0c;记录一下学习内容。 课程入口&#xff0c;感兴趣的也可以跟着学一下。 ————————————————————————————————————————— 强化学习&#xff…

ARTS 挑战打卡的第一周,我学到了这些~

目录 前言 一、学习的内容 二、超时怎么办那就换种思路看题解 三、学习打卡成果展示 3.1 Github的小技巧 3.2 英文文章阅读 3.3 一篇很不错的Java面试题博客 四、学习技巧的总结 前言 关于 ARTS 的释义 ● Algorithm: 每周至少做一个 LeetCode 的算法题 ● Review: 阅读…

Cesium相机理解

关于cesium相机&#xff0c;包括里面内部原理网上有很多人讲的都很清楚了&#xff0c;我感觉这两个人写的都挺好得&#xff1a; 相机 Camera | Cesium 入门教程 (syzdev.cn) Cesium中的相机—setView&lookAtTransform_cesium setview_云上飞47636962的博客-CSDN博客上面这…

微信小程序在使用vant组件库时构建npm报错

在跟着vant官方进行使用步骤一步步操作时&#xff0c;由于要构建NPM&#xff0c;但NPM包在App配置文件的外部 所以在做下图这一步时&#xff1a; 接着再进行npm构建时会报错 message:发生错误 Error: F:\前端学习\前端框架\小程序\project\demo\miniprogram解决方法 &#xf…

【枚举】CF1660 D

Problem - 1660D - Codeforces 题意&#xff1a; 思路&#xff1a; 思路巨简单&#xff0c;代码也wa了很多发才过&#xff0c;都是因为细节.... 很显然&#xff0c;要根据0分段处理 对于每一段&#xff0c;枚举去掉左边段还是右边段&#xff0c;左边段是 l 到第一个负数&am…

数据库技术--数据库引擎,数据访问接口及其关系详解(附加形象的比喻)

目录 背景数据库引擎Jet数据库&#xff1a;ISAM&#xff1a;ODBC&#xff08;Open Database Connectivity&#xff09;&#xff1a; 数据访问接口ADO&#xff08;ActiveX Data Objects&#xff09;DAO&#xff08;Data Access Objects&#xff09;RDO&#xff08;Remote Data O…

MySQL和钉钉单据接口对接

MySQL和钉钉单据接口对接 数据源系统:钉钉 钉钉&#xff08;DingTalk&#xff09;是阿里巴巴集团打造的企业级智能移动办公平台&#xff0c;是数字经济时代的企业组织协同办公和应用开发平台。钉钉将IM即时沟通、钉钉文档、钉闪会、钉盘、Teambition、OA审批、智能人事、钉工牌…

【小梦C嘎嘎——启航篇】内存管理小知识~

【小梦C嘎嘎——启航篇】内存管理小知识~&#x1f60e; 前言&#x1f64c;malloc/calloc/realloc的区别&#xff1f;new 与 deletenew与delete要找好搭档才能保证万无一失 new 与 delete的内部实现细节是怎么样的呢&#xff1f;&#xff1f;&#xff1f;new 的内部实现细节dele…

第五次作业 运维高级 构建 LVS-DR 集群和配置nginx负载均衡

1、基于 CentOS 7 构建 LVS-DR 群集。 LVS-DR模式工作原理 首先&#xff0c;来自客户端计算机CIP的请求被发送到Director的VIP。然后Director使用相同的VIP目的IP地址将请求发送到集群节点或真实服务器。然后&#xff0c;集群某个节点将回复该数据包&#xff0c;并将该数据包…

Rust 编程小技巧摘选(7)

目录 Rust 编程小技巧(7) 1. 交换变量 2. 翻转数组 3. for_each() 用法 4. 结构体 Display trait 5. HashMap 和 BTreeMap 6. 遍历输出哈希表 7. 分离奇数和偶数 8. 判断素数&#xff08;质数&#xff09; Rust 编程小技巧(7) 1. 交换变量 与python, go等语言用法类…

第一百二十七天学习记录:我的创作纪念日

机缘 今天收到CSDN官方的来信&#xff0c;想想也可以对我前面的学习记录进行一个总结。 关于来到CSDN的初心&#xff0c;也就是为了让自己养成一个良好的学习总结的习惯。这里要感谢我C语言视频教程的老师&#xff0c;是他建议学生们在技术博客中进行记录。对于技术博客&…

RabbitMQ的6种工作模式

RabbitMQ的6种工作模式 官方文档&#xff1a; http://www.rabbitmq.com/ https://www.rabbitmq.com/getstarted.html RabbitMQ 常见的 6 种工作模式&#xff1a; 1、simple简单模式 1)、消息产生后将消息放入队列。 2)、消息的消费者监听消息队列&#xff0c;如果队列中…