【React】JSX语法规则

JSX语法规则

1. 定义虚拟DOM时，不要写引号，不是字符串。

const VDOM = <h1>hello React</h1>

2. 标签中混入JS表达式时要用 {}。

<h2 id={myId.toLowerCase()}>

3. CSS类名指定不用class，用className。

<h2 className="title" id={myId.toLowerCase()}>

4. 内联样式要使用双大括号包裹 style={{key：value}}，表示写JS表达式，里面是对象。要加引号，否则是寻找变量。

<span style={{color: 'white', fontSize: '20px'}}>{myData.toLowerCase()}</span>

5. 不能有多个根标签，只能有一个根标签。
6. 标签必须闭合。

<input type="text" />

7. 标签首字母：
   （1）如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错。
   （2）如果是大写字母开头，react就去渲染对应的组件，如果没有就报错。

<Good>123</Good>

注意区分：JS语句（代码）与JS表达式

表达式

一个表达式可以产生一个值，可以放在任何需要值的地方。定义变量 const x = 以下这些，能接到值就是表达式，接不到值就不是表达式。如：

1. a：a是变量名，读取里面的存的值。没定义a也是表达式，但是表达式在运行时会报错 a is not defined。

const a = 1;

2. a + b
3. demo(1)：函数调用表达式。没写返回值会return undefined。
4. arr.map()：数组的map方法用于加工数组，有返回值。

let arr = [1,3,5,7,9];
arr.map((num) => {
	return num + 1
)

5. function test() {}：定义一个函数，也有返回值，就是函数本身。

const x = function test() {
	console.log('@');
}
console.log(x); // 函数本身

语句（代码）

控制代码走向的，不产生值。如：

1. if() {}
2. for() {}
3. while(){}
4. switch() {case: xxx}