JSX的本质

一、本质

  • React.createElement即h函数,返回vnode
  • 第一个参数,可能是组件,也可能是html tag
  • 组件名,首字母必须大写(React规定)

二、babel试一试 (babel集成了jsx的编译环境)

// JSX 基本用法
const imgElem = <div id="div1"><p>some text</p><img src={imgUrl}/>
</div>

在这里插入图片描述

// JSX style
const styleData = { fontSize: '30px',  color: 'blue' }
const styleElem = <p style={styleData}>设置 style</p>

在这里插入图片描述

// JSX 加载组件
const app = <div><Input submitTitle={onSubmitTitle}/><List list={list}/>
</div>

在这里插入图片描述

// JSX 事件
const eventList = <p onClick={this.clickHandler}>some text
</p>

在这里插入图片描述

// JSX list
const listElem = <ul>{this.state.list.map((item, index) => {return <li key={item.id}>index {index}; title {item.title}</li>
})}</ul>

在这里插入图片描述在这里插入图片描述

三、总结

// 总结
React.createElement(‘div’, null, [child1, child2, child3])
React.createElement(‘div’, {…}, child1, child2, child3)
React.createElement(List, null, child1, child2, ‘文本节点’)
// h 函数
// 返回 vnode
// patch

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

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

相关文章

Java:SpringBoot实现JDK动态代理和CGLIB动态代理

目录 1. JDK 动态代理2. CGLIB 动态代理总结参考文章 需要代理的对象 // 接口 public interface PayService {void pay(); }// 实现 public class AliPayService implements PayService {Overridepublic void pay() {System.out.println("AliPayService");} }1. JDK…

【反射】Constructor类

Constructor类中包含了构造方法定义的详细信息&#xff0c;可以使用Constructor类中提供的方法来获取构造方法的信息&#xff0c;下面我们先获取Constructor对象&#xff0c;再介绍如何使用Constructor类中的newInstance方法创建对象。 一、准备工作 在src/test/java目录的cn…

自定义反序列化类将LocalDate时间格式转为 LocalDateTime

从前端接收数据反序列化成类,如果时间格式不一致可能会反序列化失败 public class StorageDTO implements Serializable {private static final long serialVersionUID 1L;......//实体类中格式为JsonFormat(pattern "yyyy-MM-dd")JsonDeserialize(using CustomL…

matlab奇技淫巧——绘制三维地图

在数据处理工作中&#xff0c;常常会用到地图的绘制&#xff0c;最常用的自然是绘制平面的区域/全球地图&#xff0c;通过 worldmap(world) % 创建世界地图坐标区域 load coastlines % 导入海岸线数据 plotm(coastlat,coastlon)即可绘制&#xff0c;效果…

Vue常见的指令及使用方法

在 Vue 中&#xff0c;指令是一种特殊的属性&#xff0c;用于在 HTML 元素上绑定数据和实现交互。Vue 提供了多个常见的指令&#xff0c;让我们来逐一介绍并给出使用示例。 v-bind v-bind 指令用于绑定数据到 HTML 元素的属性&#xff0c;可以动态地更新元素的属性值。 <im…

Talk | UCSD博士生刘明华:在开放的世界中理解和生成3D物体

本期为TechBeat人工智能社区第539期线上Talk。 北京时间10月19日&#xff08;周四&#xff09;20:00&#xff0c;加州大学圣地亚哥分校博士生—刘明华的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “在开放的世界中理解和生成3D物体”&#xff0…

用护眼灯到底好不好?好用热门的护眼台灯推荐

现在市面上做护眼灯的品牌非常多&#xff0c;有的是脚踏实地&#xff0c;真正做保护消费者眼睛的产品&#xff0c;有的则是夸大宣传&#xff0c;以次充好来收割很多不明真相的群众。其实护眼灯的防蓝光是做不到完全无蓝光的&#xff0c;那些宣传完全无蓝光的商家&#xff0c;完…

会议剪影 | 思腾合力携AI服务器亮相PRCV 2023,并作主题演讲

第六届中国模式识别与计算机视觉大会&#xff08;PRCV 2023&#xff09;于2023年10月13日至15日在厦门国际会议中心酒店举办。本届会议主题为“相约鹭岛&#xff0c;启智未来”。 会议旨在汇聚国内国外模式识别和计算机视觉理论与应用研究的广大科研工作者及工业界同行&#xf…

2023年中国工业气体行业研究报告

第一章 行业概况 1.1 定义 工业气体行业是一个不可或缺的产业领域&#xff0c;它为多种行业提供关键的产品和服务。工业气体&#xff0c;包括氧气、氮气、氩气、二氧化碳、氦气、氢气及特种气体等&#xff0c;是现代工业生产和科学研究的基础。这些气体在不同的领域具有广泛的…

mysql体系结构及引擎

目录 一、mysql体系结构 二、存储引擎简介 2.1查看当前数据库支持的存储引擎 三、存储引擎的特点 3.1innodb 3.2myisam 3.3memory 四、存储引擎的选择 一、mysql体系结构 连接层 最上层是一些客户端和连接服务&#xff0c;主要完成一些类似于连接处理&#xff0c;授权认…

C- 使用原子变量实现自旋锁

自旋锁 自旋锁&#xff08;Spinlock&#xff09;是一种常用于多线程编程中的低开销锁&#xff0c;其特点是当线程尝试获取锁而锁已被其他线程占用时&#xff0c;该线程会处于一个持续的忙等待&#xff08;busy-wait&#xff09;状态&#xff0c;直到它可以获取到锁为止。这种方…

哈夫曼树的建立(C++,最优树)

介绍&#xff1a; 哈夫曼树&#xff08;Huffman Tree&#xff09;是一种用于数据压缩的树形数据结构。它是由刚特哈夫曼于1952年发明的。 哈夫曼树的特点是&#xff1a;对于一个长度为n的字符集&#xff0c;它可以将每个字符在树上表示为一个唯一的二进制编码。在哈夫曼树中&am…

NSSCTF做题(10)

叫10好听一点&#xff0c;就是补9的 第7页的内容 [SWPUCTF 2022 新生赛]ez_sql get传参说是不安全&#xff0c;那就只能用post了 有回显了&#xff0c;两个假的flag 发现万能密码 1 or 11#变成了 11# 11# 1 11#1# 11# 11# 发现or和空格都无了&#xff0c;union也过滤 …

golang的json转pb验证

基于这篇文章的最后一个代码进行验证。 https://blog.csdn.net/mijichui2153/article/details/133894403?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22133894403%22%2C%22source%22%3A%22mijichui2153%22%7D 1、准备 &…

Python新手常犯的8个错误,你中招了吗?

我们都知道Python是一门非常流行和强大的编程语言&#xff0c;而作为一个刚入门Python编程的新手&#xff0c;你可能会犯一些常见的错误&#xff0c;这些错误可能会阻碍你的学习和项目进展。 如何避免这些常见的错误呢&#xff1f;在本文中&#xff0c;小编将为你介绍8个新手P…

OJ第四篇

文章目录 链表分割环形链表有效的括号 链表分割 链接: 链表分割 虽然这个题牛客网中只有C,但是无所谓&#xff0c;我们只要知道C是兼容C的就可以了 至于说这个题的思路&#xff0c;我们就弄两个链表&#xff0c;把小于x的结点放到一个链表中&#xff0c;剩下的放到另一个链表…

群狼调研(长沙社情民意调查) | 残疾人服务满意度调查流程

以下是一个基本的残疾人服务满意度调查流程&#xff0c;可以根据实际情况进行调整和修改&#xff1a; 1. 制定调查目标和范围&#xff1a;明确调查的目标、范围和重点&#xff0c;确定需要评估的服务类型和方面。 2. 制定调查计划&#xff1a;确定调查的时间表、预算、人员分…

【c#】Quartz开源任务调度框架学习及练习Demo

Quartz开源任务调度框架学习及练习Demo 1、定义、作用 2、原理 3、使用步骤 4、使用场景 5、Demo代码参考示例 6、注意事项 7、一些Trigger属性说明 1、定义、作用 Quartz是一个开源的任务调度框架&#xff0c;作用是支持开发人员可以定时处理业务&#xff0c;比如定时…

Python常用视频编辑操作——读取与保存视频、更改帧数、拼接视频、视频语音合并、视频与图像互转等

1.更改视频帧数 降低视频帧数&#xff0c;简单的操作只能降低视频帧数&#xff0c;如果要增加视频帧数&#xff0c;那就要使用深度学习进行插帧处理&#xff1a; import cv2 from moviepy.editor import * def change_fps(inpt_path,output_path,fps):# 加载视频video Video…

python实现TCPclient

python实现TCPclient是一件简单的事情&#xff0c;只要通过socket这个模块就可以实现。 一、实现步骤 1、导入模块&#xff1a; 首先&#xff0c;你需要导入Python的socket模块。 import socket2、创建Socket对象&#xff1a; 使用socket.socket()函数创建一个新的socket对…