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 = (<h1 id={id}><span>{data}</span></h1>
)

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

执行后的HTML结果如下：

<div id="root"> <!-- react容器 --><h1 id="title"> <!-- 使用JS变量指定的id --><span>hello react</span><!-- 使用JS变量指定的标签内容 --></h1>
</div>

3. className属性

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

<style>.title {color: aquamarine;}
</style>
<script type="text/babel">const data = 'hello react'const id = 'title'const VDOM = (<h1 id={id} className='title'><!-- className指明类名 --><span>{data}</span></h1>)// 2. 渲染虚拟DOMReactDOM.render(VDOM, document.getElementById('root'))</script>

4. 内联样式

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

<script type="text/babel">const data = 'hello react'const id = 'title'const VDOM = (<h1 id={id} ><span style={{ color: 'aquamarine',fontsize:'30px' }}>{data}</span></h1>)// 2. 渲染虚拟DOMReactDOM.render(VDOM, document.getElementById('root'))
</script>

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

5. 根标签只能有一个

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

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

6. 所有标签必须闭合

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

在HTML中合法的<input type='text'>是不符合JSX语法的，必须自结束<input type='text' />

<input /> //标签必须自结束
<div></div>

7. 标签的大小写

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

<xiaoming></xiaoming> //报没有对应标签错误
<Xiaoming></Xiaoming> //报没有对应的组件错误（如果没有定义的话）

03-JSX的语法规则相关推荐

4、JSX 基本语法规则
JSX 基本语法规则上一篇博文稍微说了一下虚拟DOM 和真实DOM 的区别,这一篇我们稍微说一下 jsx 的一些语法规则,这个是在开发中经常遇到的,今天稍微过一下. 什么是 JSX JSX 全称 ...
JSX 基本语法规则
JSX 全称 JavaScript XML,是React 定义的一种类似于 XML 的 JS 扩展语法:JS + XML 本质是 React.createElement(component, prop ...
reactjs jsx语法规则
jsx语法规则: 1.定义虚拟DOM时,不要写引号. 2.标签中混入JS表达式时要用{}. 3.样式的类名指定不要用class,要用className. 4.内联样式,要用style={{key:va ...
react总结之jsx是什么，jsx语法规则
文章目录目录一.jsx是什么? 二.jsx的优点三.jsx语法规则一.jsx是什么? jSX 代表 Javascript XML.它是 Javascript 和 Html 的融合.它是一种类似 ...
从零开始React：一档 React环境搭建，语法规则，基础使用
手挽手带你学React入门第一期,带你熟悉React的语法规则,消除对JSX的恐惧感,由于现在开发中都是使用ES6语法开发React,所以这次也使用ES6的模式进行教学,如果大家对ES6不熟悉的话,先 ...
【JavaSE学习】03面向对象Java语法
JavaSE(B站黑马)学习笔记 01Java入门 02数组.方法 03面向对象&Java语法 04-1Java高级(Stream流.异常处理.日志技术) 04-2Java高级(文件处理-IO ...
伪代码（Pseudocode）的语法规则
伪代码(Pseudocode)是一种算法描述语言.使用伪代码的目的是为了使被描述的算法可以容易地以任何一种编程语言(Pascal,C,Java,etc)实现.因此,伪代码必须结构清晰.代码简单.可读性 ...
LLVM一些语法规则
LLVM一些语法规则 LLVM文档 LLVM编译器基础架构支持广泛的项目,从工业强度编译器到专门的JIT应用程序,再到小型研究项目. 同样,文档分为几个针对不同受众的高级别分组: LLVM设计概述几 ...
一文详解CMakeLists文件编写语法规则详解
作者丨zhanghm1995@blog 来源丨https://blog.csdn.net/zhanghm1995/article/details/80902807 编辑丨3D视觉工坊基本语法规则 C ...

03-JSX的语法规则