1.5 JSX语法与HTML之间的写法区别

一、JSX与HTML的区别

1. JSX标签要小写

2. JSX标签要闭合

3. JSX中class和for是关键字

   1. 使用class加样式得用className

   2. 使用for循环得用htmlFor

4. 属性需要使用小驼峰式命名，自定义属性除外

5. 大括号内使用JavaScript

   1. 通过大括号生成JavaScript环境

   2. 通过单括号使用模板语法

   3. 可以定义变量进行使用

   4. 对象和函数是不能直接放到JSX{}中的

   5. 注释：大括号内的注释：多行-/**/；单行-//

6. 属性使用大括号

   1. 默认标签属性直接使用引号标记即可：""

   2. 动态标签属性可以直接使用大括号包裹变量名生成Javascript环境：{}

7. 注释

   1. 单行：//

   2. 多行：/**/

   3. {}内是JavaScript环境

8. 唯一根节点

   1. 最外层只能有一个div节点或其他标签的根节点

   2. 可以引入React的Fragment容器来包裹，那样不会额外生成div标签，简写：<>

   3. 区别：Fragment可以添加key属性(循环下可以使用)，简写不允许添加属性

二、推荐工具

HTML转JSX：trsnsform.tools