JSX 語法

變量的定義及使用

let name = 'bob';
使用變量的值：
<div>I am {name}</div>

條件判斷

let flag = true;
let jsx = (
<div>
flag ? 【flag 為true 執(zhí)行的邏輯】:【flag 為 false 執(zhí)行的邏輯】
</div>
)

數(shù)組循環(huán)

let names = ['a', 'b', 'c']

names.map(
(name)=>
<p>name</p>
)

組件用法

下面代碼中依據(jù) ES6 的方式定義組件；
React 把組件看成是一個狀態(tài)機（State Machines）。通過與用戶的交互，實現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。
React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。

import React, { Component } from 'react'
class PerfmissionUserRoles extends Component {
constructor(props, content) {
    super(props, content)
    this.state = {
        name = 'bob'
  
    }
}

// //componentDidMount 代表當前組件加載完成要做的事情
 async componentDidMount() {
       
    }

render(){
    如果想要再 render  中定義兩塊 html，需要先定義一個 div,然后把兩塊 html放到 div中
    可以通過 setState【React 組件提供的方法】 方法修改 構造器中 state中國呢的值
    可以在事件的回調或者異步的回調操作里面可以這樣操作數(shù)據(jù)的
    this.setState({
        name : '你好'
    })
    
    return(
        <div>
        <div>{this.state.name}</div>
        <div>你好</div>
        </div>
        
        
    )
}
}