03-JSX的语法规则
admin
2024-03-21 16:42:14
0次

JSX的语法规则

JSX是React为了方便创建虚拟DOM创建的一门新语言，语法类似于HTML，但是稍有区别。

1. JSX基本信息

JSX全称JavaScript XML，一种类似于XML的JS扩展语法（JS+XML）。

其本质是React.createElement(component,props,...children)方法的语法糖。

2. JS表达式

JSX中可以使用JS原生的表达式，例如在JSX语句中插入JS变量：

const data = 'hello react'
const id = 'title'const VDOM = (
{data}

)

上例中使用{ }包裹JS表达式（这里式变量）实现在JSX中插入JS变量。

执行后的HTML结果如下：

 
 hello react

3. className属性

在JSX中不能直接使用class指定标签的属性名，必须使用className：

4. 内联样式

如果需要直接在标签上添加样式，需要使用style={{ ... }}语法：

注意： 此处的双花括号{{ ... }}并不是一体的，外侧花括号表示内部是一个JS表达式，内测花括号表示是一个对象，所以style实际上接收的是一个JS对象。

5. 根标签只能有一个

如果存在多个并列的标签，需要在外侧添加一个新的标签包裹。

const VDOM = (// 直接创建两个同层级的标签是错误的// 
第一个标签
// 
第二个标签
  
 //外侧包裹一层标签
第一个标签
第二个标签

)

6. 所有标签必须闭合

在React中，所有的标签必须闭合，如果一个标签没有结束标签，可以使用自结束。

在HTML中合法的是不符合JSX语法的，必须自结束

 //标签必须自结束

7. 标签的大小写

如果一个标签的 首字母是小写的，JSX会转为对应的HTML标签，如果首字母是大写字母，JSX会认为这个标签是一个React对象。

 //报没有对应标签错误
 //报没有对应的组件错误（如果没有定义的话）
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：java计算机毕业设计停车场管理系统源程序+mysql+系统+lw文档+远程调试

下一篇：珠海航展有图扑 | 数字孪生方案助力参展商

相关内容

热门资讯

安卓如何操控苹果系统,揭秘跨平... 你知道吗？在这个科技飞速发展的时代，安卓和苹果两大操作系统之间的较量可是从未停歇。虽然它们各自有着忠...
安卓系统账户同步数据,畅享无缝... 你有没有遇到过这种情况：手机里存了那么多宝贝照片、重要文件，结果换了个新手机，却发现那些宝贝全都不翼...
安卓系统不停推送广告,安卓系统... 你有没有发现，最近你的安卓手机是不是越来越“热情”了？没错，就是那个不停在你屏幕上跳来跳去的广告！今...
airpods可以和安卓系统,... 你有没有想过，那些炫酷的AirPods竟然也能和安卓手机完美搭配？没错，就是那个我们平时只听说和iP...
安卓系统实体键盘不对,创新与挑... 你是不是也遇到了这个问题？安卓手机的实体键盘突然不对劲了，按下去没反应，或者反应迟钝，简直让人抓狂！...
汽车导航改装安卓系统,安卓系统... 你有没有想过，你的汽车导航系统是不是已经out了？现在，让我来给你揭秘如何给你的爱车来一次科技大变身...
安卓系统如何限制下载,安卓系统... 你有没有发现，手机里的安卓系统越来越智能了？不过，这也意味着有时候我们不小心就会下载一些不想要的软件...
安卓系统调成日语,概要の副標題... 你有没有想过，你的安卓手机竟然可以变成一个日式小天地呢？没错，就是那种动漫里常见的日语界面，是不是听...
男生耳机推荐安卓系统,男生耳机... 耳机可是现代生活中不可或缺的小玩意儿，尤其是对于喜欢听音乐的男生来说，一副好耳机简直就是灵魂的伴侣。...
安卓同版本升级系统,功能优化与... 你知道吗？最近手机界可是热闹非凡呢！各大品牌纷纷推出了安卓同版本升级系统，让我们的手机焕然一新。今天...
安卓更换别的手机系统,轻松切换... 你有没有想过，你的安卓手机用久了，是不是有点审美疲劳了呢？或者，你最近是不是对其他手机系统产生了浓厚...
安卓系统单机神雕侠侣,指尖重温 你有没有想过，在手机上也能体验一把江湖恩怨、侠骨柔肠？没错，就是那个让人心驰神往的《神雕侠侣》！今天...
安卓系统键盘语言切换,安卓系统... 你有没有发现，手机上的安卓系统键盘语言切换功能，简直就像是个神奇的魔法棒，轻轻一点，就能让文字飞舞在...
oppok1安卓系统,性能与体... 你有没有发现，最近手机圈里又掀起了一股热潮？没错，就是OPPO K1这款新机！这款手机不仅外观时尚，...
安卓系统环境的搭建,从零开始构... 想要在电脑上体验安卓系统的魅力，是不是已经跃跃欲试了呢？别急，今天就来手把手教你如何搭建一个属于自己...
【MySQL】锁 锁 文章目录锁全局锁表级锁表锁元数据锁（MDL）意向锁AUTO-INC锁...
【内网安全】 隧道搭建穿透上线... 文章目录内网穿透-Ngrok-入门-上线1、服务端配置：2、客户端连接服务端ÿ...
GCN的几种模型复现笔记 引言 本篇笔记紧接上文，主要是上一篇看写了快2w字，再去接入代码感觉有点...
数据分页展示逻辑 import java.util.Arrays;import java.util.List;impo...
Redis为什么选择单线程？R... 目录专栏导读一、Redis版本迭代二、Redis4.0之前为什么一直采用单线程？三、R...