React中的JSX语法规则总结

一、JSX语法规则

1. 定义虚拟DOM时，不要写引号。
2. 标签中混入JS表达式时要用{}。
3. 样式的类名指定不要用class，要用className。
4. 内联样式，要用style={{key:value}}的形式去写。
5. 只有一个根标签。
6. 标签必须闭合。
7. 标签首字母。
   （1）若小写字母开头，则将该标签转为html同名元素，若html中午该标签对应的同名元素，则报错。
   （2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

二、JS语句（代码）与JS表达式的区别

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，例如下面这些都是表达式：

（1）a
（2）a + b
（3）func(1)
（4）arr.map()
（5）function test() {}

2.语句（代码）：不产生值，是执行一些命令或者步骤，例如下面这些都是语句：

（1）if() {}
（2）for() {}
（3）switch() {case:xxxx}

三、备注：

1.本文参考：https://www.bilibili.com/video/BV1wy4y1D7JT?p=5