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文档+远程调试

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

热门资讯

怎么解除订阅安卓系统,安卓系统... 你是不是也和我一样，手机里订阅了好多服务，结果现在想解除订阅，却一头雾水？别急，今天就来手把手教你如...

安卓系统停用怎么开启,轻松恢复... 亲爱的手机控们，你是否曾经遇到过安卓系统突然停用的情况，让你手忙脚乱，不知所措？别担心，今天就来教你...

安卓系统电池健康度,电池健康度... 你有没有发现，你的安卓手机最近是不是有点儿不给力了？电池续航能力大不如前，充电速度也慢了不少？别急，...

安卓系统按键怎么截图,安卓系统... 你是不是也和我一样，有时候想截个图分享给朋友，却发现安卓手机的截图功能有点神秘呢？别急，今天就来手把...

购票系统安卓源代码,架构设计与... 你有没有想过，那些我们每天离不开的购票系统，它们背后的秘密是什么呢？今天，就让我带你一探究竟，揭开购...

安卓手机系统后台测试,深度解析... 你有没有发现，你的安卓手机后台总是悄悄地忙碌着？别小看了这些后台程序，它们可是手机系统稳定运行的关键...

安卓系统重启的图标,解锁设备新... 手机突然重启，是不是心里有点慌？别急，今天就来和你聊聊安卓系统重启的图标，让你一眼就能认出它，再也不...

车载智慧屏安卓系统,智能出行新... 你有没有发现，现在的车载智慧屏越来越智能了？尤其是那些搭载了安卓系统的，简直就像是个移动的小电脑，不...

安卓系统连上网权限,解锁设备无... 你有没有发现，你的安卓手机里有些应用总是偷偷连上网？别小看这个小小的网络权限，它可是能影响你隐私、消...

安卓谷歌操作系统,探索安卓谷歌... 你知道吗？在智能手机的世界里，有一个操作系统可是无人不知、无人不晓，那就是安卓谷歌操作系统。它就像一...

安卓系统手写%怎样调出,具体实... 你有没有遇到过这种情况：在使用安卓手机的时候，突然想用手写输入法来记录一些灵感或者重要信息，可是怎么...

安卓手机重置系统设置,轻松恢... 手机用久了是不是感觉卡顿得厉害？别急，今天就来教你怎么给安卓手机来个大变身——重置系统设置！想象你的...

win如何安装安卓系统,Win... 哇，你有没有想过，让你的Win系统也能玩转安卓应用？没错，就是那种在手机上轻松自如的安卓系统，现在也...

苹果qq和安卓系统,跨平台体验... 你有没有发现，现在手机市场上，苹果和安卓的较量可是越来越激烈了呢！咱们就来聊聊这个话题，看看苹果QQ...

显示最好的安卓系统,探索最新旗... 你有没有想过，为什么安卓系统那么受欢迎呢？它就像一个魔法盒子，里面装满了各种神奇的魔法。今天，就让我...

安卓app怎么降级系统,系统版... 你有没有发现，有时候安卓手机的系统更新后，新功能虽然炫酷，但老系统用起来更顺手呢？别急，今天就来教你...

雷军脱离安卓系统,引领科技变革... 你知道吗？最近科技圈可是炸开了锅，因为我们的雷军大大竟然宣布要脱离安卓系统，这可真是让人大跌眼镜啊！...

安卓系统自动开网络,安卓系统自... 你有没有发现，手机里的安卓系统有时候会自动开启网络连接，这可真是让人又爱又恨啊！有时候，你正专心致志...

安卓系统怎样控制后台,因为服务... 手机里的安卓系统是不是感觉越来越卡了？后台程序太多，不仅耗电还影响性能。别急，今天就来教你怎么巧妙地...

安卓系统打游戏推荐,一触即达！你有没有发现，现在手机游戏越来越好玩了？不管是休闲小游戏还是大型MMORPG，都能在手机上畅玩。但是...