一分钟看懂React的JSX语法（一分钟看懂React的JSX语法）

一分钟看懂React的JSX语法（一分钟看懂React的JSX语法）标签可以任意嵌套。例如：2.嵌套规则二、JSX基本规则1.基本规则 JSX 构建组件的规则和 XML 规则一致

学习react.js一般来说同时也要学会JSX语法，facebook官方推荐使用该语法代替javascript常规语法。下文详细讲解JSX在react中的相关用法。

一、What is JSX?

JSX 是Facebook为React开发的一套语法糖，创建JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套 ，保持和 HTML 一致的结构 ，语法上除了在描述组件上比较特别以外， 其它和普通的Javascript没有区别 。并且最终所有的 JSX 都会编译为原生Javascript。

中文网参考 ：https://doc.react-china.org/docs/jsx-in-depth.html

二、JSX基本规则

1.基本规则

JSX 构建组件的规则和 XML 规则一致

2.嵌套规则

标签可以任意嵌套。例如：

3.标签闭合

标签必须严格闭合，否则无法编译通过。

自闭合：

标签闭合：

4.JSX组件

JSX 组件分为 HTML 组件和 React 组件，HTML 组件就是 HTML 中的原生标签。例如：

React 组件就是自定义的组件，例如：

5.组件属性

和 HTML 一样，JSX 中组件也有属性，传递属性的方式也相同 ，对于HTML 组件：

如果是 React 组件可以定义自定义属性（Props），属性既可以是字符串，也可以是任意的 Javascript 变量 传递方式是将变量用花括号包裹：

注意： 属性的写法上和 HTML 存在区别 ，在写 JSX 的时候，所有的属性都是驼峰式（Webkit ms）写法

而原生的写法为:

这主要是标准的原因。驼峰式是 Javascript 的标准写法，并且 React 底层是将属性直接对应到原生DOM 的属性，而原生DOM 的属性是驼峰式的写法，这里也可以理解为什么类名不是 class 而是 className 了。

又因为 class 和 for 还是 js 关键字，所以 js中: class => calssName，for => htmlFor

除此之外比较特殊的地方是 `data-*` 和 `aria-*` 两类属性是和 HTML 一致的。

6.显示文本

很多情况下，我们需要将JS中的文本直接显示，做法和显示变量属性一样，用花括号包裹：

7.运算

花括号里边除了变量以外，还可以是一段JS表达式，我们可以利用花括号做简单的运算：

8.注释

注释写法如下：

注意：在标签内部的注释需要写在花括中，在标签外的的注释不使用花括号

9.限制规则

render 方法返回的组件必须有且只有一个根组件，错误情况的例子如下：

10.组件命名空间

JSX 可以通过命名空间的方式使用组件。

通过命名空间的方式可以解决相同名称不同用途组件冲突的问题：

如有疑问欢迎评论、留言联系作者，关注本头条号将有精彩视频资料赠送，欢迎私信来取~