jsx语法的几个注意点

1. {}里面放的内容

• 必须有返回值
• 函数(当成组件可以)
• 对象不可以 (例外: 如果引入的是 style 样式, 可以)
• 数组
• 普通数据类型可以 null, boolean, undefined
• 可以运算, 字符串拼接
• 不可以 if else, 但是可以三元运算

let name = "杰克";

<div>{name}</div>   //ok
--------------------------

function Jieke(){
	return "jieke"
}

<div>{Jieke}</div>   //报错
<Jieke />	//组件形式 ok

--------------------------

let name = {username: "杰克"}

<div>{name.username}</div>   //ok
<div>{name}</div>   //报错

--------------------------	

let name = [1,2,3]

<div>{name}</div>   //ok 打印出 123

let name = [1,{},3]

<div>{name}</div>   //报错

--------------------------	

<div style={color:"red"}>{name}</div>   //报错
但
let style={color:"red"}
ReactDOM.render(
	<div style={style}>{name}</div>  //ok
)

import React from 'react';   //解释 jsx 语法, 并转译虚拟 dom 对象(babel-preset-react)
import ReactDOM from 'react-dom'; //将虚拟 dom 的对象渲染到页面中

// render 的三个参数: jsx 元素, 挂载点, callback

let obj = <div>hello</div>

ReactDOM.render(
	//第一个参数:jsx 元素
	obj, // 所以 jsx 可以是个jsx对象
  	//第二个参数:挂载点
  	document.getElementById('app'),
  	//第三个参数:callback
  	() => { console.log('good') }
)