React18入门(第一篇)——JSX、TSX语法详解

文章目录

    • 一、JSX 语法简介
    • 二、和 HTML 标签的几点不同
    • 三、JSX 属性
    • 四、JSX 事件
        • 4.1 简单点击事件
        • 4.2 类型限制
        • 4.3 带参数,箭头函数
    • 五、插入 JS 变量
    • 六、JSX 中使用条件判断
    • 七、循环


一、JSX 语法简介

  1. JSX - 是 JS 的扩展,写在 JS 代码里面,组件的 UI 结构
  2. 语法和 HTML 相似,有 HTML 相关基础,学起来很容易
  3. JSX 已成 ES 规范(不是React独有),可用于其他的框架,如 Vue3

注:需要用 Js 语法写的时候,文件后缀名就是 .jsx ;需要用 Ts 语法写的时候,文件后缀名就是 .tsx

示例代码:

// App.tsx 代码
import React from 'react'
import logo from './logo.svg'
import './App.css'function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.tsx</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>)
}
export default App

二、和 HTML 标签的几点不同

  1. 首字母大小写的区别,首字母大写是自定义组件
  2. 标签必须闭合,如 在 HTML 中合法,但在 JSX 中是非法的
  3. 每段 JSX 代码片段都必须要有一个根节点,根节点可以是空标签 <> </>。如下图所示:

在这里插入图片描述


三、JSX 属性

  1. class 要改成 className
  2. style 要使用 JS 对象(不能是 string )而且 key 用驼峰写法
  3. for 要改为 htmlFor

在这里插入图片描述


四、JSX 事件

事件就是那些什么 点击事件、监听事件等

  • 使用 onXxx 的格式
  • 必须传入一个函数(是 fn 而非 fn() )
  • 注意 TypeScript 类型(初学着不着急深究,会用,不报错即可 )
4.1 简单点击事件

在这里插入图片描述

4.2 类型限制

在这里插入图片描述

4.3 带参数,箭头函数

在这里插入图片描述


五、插入 JS 变量

  • 使用 { XXX } 可以插入 JS 变量、函数、表达式
  • 可插入普通文本、属性
  • 可用于注释

在这里插入图片描述


六、JSX 中使用条件判断

  • 使用 &&
  • 使用 三元表达式
  • 使用 函数

在这里插入图片描述


七、循环

  • 使用数组 map
  • 每个 item 元素需要 key 属性
  • key 在同级别唯一

在这里插入图片描述

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

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

相关文章

STM32 DMA从存储器发送数据到串口

1.任务描述 &#xff08;1&#xff09;ds18b20测量环境温度存储到存储器&#xff08;数组&#xff09;中。 &#xff08;2&#xff09;开启DMA将数组中的内容&#xff0c;通过DMA发送到串口 存在问题&#xff0c;ds18b20读到的数据是正常的&#xff0c;但是串口只是发送其低…

python (*)和(**)的用法

在Python中&#xff0c;星号除了用于乘法数值运算和幂运算外&#xff0c;还有一种特殊的用法"在变量前添加单个星号或两个星号"&#xff0c;实现多参数的传入或变量的拆解&#xff0c;本文将详细介绍"星号参数"的用法。 # 什么是星号变量&#xff08;*&am…

ORACLE insert 性能比较

ORACLE insert 性能比较 在Oracle数据库中&#xff0c;不是提交越频繁越好。恰恰相反&#xff0c;批量提交可以得到更好的性能。这篇文章给大家简单展示一下在Oracle数据库中逐行提交于批量提交两者之间的性能差别。最后再给出一种可以极大改变性能的方法。 1.创建表t_ref&…

闲话Python编程-函数

在Python实际编程过程中&#xff0c;组织代码结构的两个重要手段是&#xff1a;函数和类。有了函数&#xff0c;我们才能把一个个内聚的流程封装起来&#xff1b;有了类&#xff0c;我们才能把一个个现实对象抽象表达出来&#xff0c;即使你说不用自己写类&#xff0c;但是你用…

Redis Cluster Gossip Protocol: 目录

术语说明 server&#xff1a;当前的节点 cluster&#xff1a;每个节点的内存中都有一个集群信息结构&#xff0c;里面包含了集群中各个节点的状态信息&#xff08;包括server自己&#xff09; myself&#xff1a;当前节点在cluster中的实体 node&#xff1a;cluster节点字典中…

C/C++ 数据结构 - 队列

1.队列 https://blog.csdn.net/LiuBo_01/article/details/80412290 1 #include <stdio.h>2 #include <stdlib.h>3 4 typedef struct Node5 {6 int data;7 struct Node* next;8 }N;9 10 typedef struct11 {12 N* front;13 N* rear;14 }Q;15 16 //…

WSL安装异常:WslRegisterDistribution failed with error: 0xc03a001a

简介&#xff1a;如果文件夹右上角是否都有两个相对的蓝色箭头&#xff0c;在进行安装wsl时&#xff0c;设置就会抛出 Installing WslRegisterDistribution failed with error: 0xc03a001a的异常 历史攻略&#xff1a; 卸载WSL WSL&#xff1a;运行Linux文件 WSL&#xff1…

Java下正面解除警告Unchecked cast: ‘java.lang.Object‘ to ‘java.util.ArrayList‘

就是我在反序列化时&#xff0c;遇到这样一个警告&#xff1a; Unchecked cast: java.lang.Object to java.util.ArrayList<com.work1.Student>然后我去网上查&#xff0c;有些人说用SuppressWarnings(“unchecked”)去忽略警告&#xff0c;但是我觉得作为一名合格的程序…

postgresql-自增字段

postgresql-自增字段 标识列IdentitySerial类型Sequence序列 标识列Identity -- 测试表 create table t_user( -- 标识列自增字段user_id integer generated always as identity primary key,user_name varchar(50) not null unique );-- 自动生成序列 CREATE SEQUENCE public…

【重拾C语言】三、分支程序设计(双分支和单分支程序设计、逻辑判断、多分支程序设计、枚举类型表示;典型例题:判断闰年和求一元二次方程根)

目录 前言 三、分支程序设计 3.1 判断成绩是否及格——双分支程序设计 3.2 成绩加上获奖信息—单分支程序设计 3.3 逻辑判断——布尔类型 3.4 获奖分等级——多分支程序设计 3.5 表示汽车种类——枚举类型 3.6 例题 3.6.1 例题——判断某个年份是否闰年 3.6.2 例题—…

【PyCharm Community Edition】:excel操作

Excel操作 相关模块openpyxlxlrdshutil 实例 相关模块 openpyxl 可以对.xlsx,.xlsm,.xltx,.xltm文件格式操作 打开文件&#xff1a;wb_xlsx openpyxl.load_workbook(“文件名”)新建文件&#xff1a;wb_xlsx openpyxl.Workbook()新建sheet表&#xff1a;wb_xlsx_sheet wb…

alibaba dragonwell jdk

阿里巴巴Dragonwell8快速指南 dragonwell-project/dragonwell8 Wiki GitHub 阿里巴巴Dragonwell8用户指南 dragonwell-project/dragonwell8 Wiki GitHub 阿里巴巴Dragonwell8常见问题 dragonwell-project/dragonwell8 Wiki GitHub

MySQL 性能优化

MySQL 性能优化 数据库命名规范 所有数据库对象名称必须使用小写字母并用下划线分割所有数据库对象名称禁止使用 MySQL 保留关键字&#xff08;如果表名中包含关键字查询时&#xff0c;需要将其用单引号括起来&#xff09;数据库对象的命名要能做到见名识意&#xff0c;并且最…

【记录】IDA|IDA怎么查看当前二进制文件自动分析出来的内存分布情况(内存范围和读写性)

IDA版本&#xff1a;7.6 背景&#xff1a;我之前一直是直接看Text View里面的地址的首尾地址来判断内存分布情况的&#xff0c;似乎是有点不准确&#xff0c;然后才想到IDA肯定自带查看内存分布情况的功能&#xff0c;而且很简单。 可以通过View-Toolbars-Segments&#xff0c…

OpenMesh 网格简化之顶点聚类

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 顶点聚类方法将落在给定大小体素中的所有顶点集中到单个顶点之上,其过程有点类似于点云体素下采样,之后再基于聚类之后的顶点重新连接面片,以达到网格简化的目的。 二、实现代码 #define _USE_MATH_DEFINES #in…

同学苹果ios的ipa文件应用企业代签选择签名商看看这篇文章你再去吧

同学我们要知道随着互联网的发展&#xff0c;苹果应用市场的火爆&#xff0c;越来越多的开发者加入到苹果应用开发行业中来。同时&#xff0c;苹果应用市场上的应用也在不断增多&#xff0c;用户数量也在不断增加&#xff0c;苹果应用代签是指通过第三方公司为开发者的应用进行…

计算机视觉——飞桨深度学习实战-起始篇

后面我会直接跳到实战项目&#xff0c;将计算机视觉的主要任务和目标都实现一遍&#xff0c;但是需要大家下去自己多理解和学习一下。例如&#xff0c;什么是深度学习&#xff0c;什么是计算机视觉&#xff0c;什么是自然语言处理&#xff0c;计算机视觉的主要任务有哪些&#…

14.(开发工具篇github)如何在Github配置ssh key

第一步&#xff1a;检查本地主机是否已经存在ssh key 上图表示已存在。跳第三步 第二步&#xff1a;生成ssh key ssh-keygen -t rsa -C "xxxxxx.com"第三步&#xff1a;获取ssh key公钥内容&#xff08;id_rsa.pub&#xff09; cat id_rsa.pub第四步&#xff1a;G…

CompletableFuture 异步编排

目录 CompletableFuture 的详解代码测试配置类的引入Demo1Demo2CompletableFuture的async后缀函数与不带async的函数的区别ThreadPoolTaskExecutor 和 ThreadPoolExecutor 的区别Spring 线程池的使用业务使用多线程的原因场景一:场景二:FutureTask介绍线程池为什么要使用阻塞队…

shutdown的各类参数及用法

shutdown的各类参数 先说下系统自带的关机指令&#xff0c;很多人应该已经知道了&#xff0c;就是shutdown&#xff0c;不带参数执 行将会列出它的参数&#xff0c;常用参数为&#xff1a; -s&#xff08;或“/s”&#xff09; 关闭计算机 -r&#xff08;或“/r”&#xff09;…