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') }
)