2.JSX

JSX(JavaScript XML) 是 JavaScript 的语法扩展，格式上比较像模板语言。React支持JSX

下面两个代码可以实现相同的功能，JSX看起来要简洁一些

目录

1  使用环境

2  React中的JSX

2.1  特殊的属性

2.2  没有子节点的标签

2.3  小括号包裹

3  JSX使用JS表达式

3.1  直接写变量

3.2  调用函数

3.3  判断渲染

3.4  html字符

3.5  直接给对象

3.6  列表渲染

3.7  处理样式

3.7.1  style

3.7.2  className

4  JSX的语法转换过程

---

1  使用环境

在默认情况下直接在html文件夹中用JSX是不行的

在脚手架中你直接就可以用。JSX一个变量中只能放一个元素，这个元素中可以有无数个子元素，但你直接并列放两个元素是不行的

原因是 JSX 需要使用babel编译处理后，才能在浏览器环境中使用，脚手架已经默认配置好了babel

2  React中的JSX

2.1  特殊的属性

在 React 中元素的属性名使用的是驼峰命名法，且与html的属性名有所区别，比如 class -> class name , for -> htmlFor , tabindex -> tabIndex

你如果沿用html的写法就会有warning

虽然有warning，但类名依然被挂载上了

最好是写成 className

这样就没有了className的warning

2.2  没有子节点的标签

在JSX中没有子节点的标签可以直接以 />收尾

2.3  小括号包裹

在使用JSX的时候最好在最外层加一层小括号

这样写有时会避免一些错误，如果最后找不到错误在哪，可以尝试这样定义JSX

3  JSX使用JS表达式

JSX很像一个模板引擎，在渲染页面的时候我们需要渲染一些变量

像 三元表达式，逻辑中断 这些很不常用的东西我就不写了，在实际生活中应该只有面试会用到，到时再看看也能懂

3.1  直接写变量

我们直接用 单大括号内加变量名 就可以搞进去了

3.2  调用函数

也可以直接调用函数

3.3  判断渲染

可以在函数中搞一些判断，然后return不同的东西，达到不同的条件渲染不同元素的效果

3.4  html字符

JSX本身也可以放入大括号中

3.5  直接给对象

但你不能直接写一个对象进去，写对象进去它不知道你是什么意思，在style属性中可以给对象，后面我们用到的时候再说

3.6  列表渲染

需要给遍历生成的每一个元素一个key属性，不然会出现一个warning

• 用for循环我不知道该怎么搞，以后循环就用map()就完了

key属性的值需要唯一，不然还是有warning（给一个固定的字符串是不行的），一般我们会选择对象中有唯一标识性的属性，比如说id，如果没有id也可以选择其他的属性，只要key属性存在且都不相同就不会出现warning

一般我们不会使用列表的索引号作为key，因为列表的索引号可能会变化，如果使用索引号也是会给warning

3.7  处理样式

可以直接写style给样式，也可以通过给类名的方式写样式

3.7.1  style

• 像font-size这种不能给横杠，大部分都是驼峰命名法
• 两个连续的大括号实则是 style = {样式对象}

3.7.2  className

先在index.css中给一个test类名的样式

之后需要在index.js中引入index.css，在html中使用link引用是没有用的，最后用className给个test类名

4  JSX的语法转换过程

JSX实际上是React.createElement()的简化语法(语法糖)，是由@babel/preset-react插件(这个插件在脚手架中自动安装)编译为createElement()方法，之后再由React.createElement()生成一个React元素，React元素实质上是一个JS对象，把React元素再传给负责渲染的方法，就可以将这个React元素渲染到页面上了

我们简单验证一下，首先看JSX

console.log()的结果是一个react元素，里面有一些属性

再看React.createElement()

效果一样