JSX 语法

变量的定义及使用

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

条件判断

let flag = true;
let jsx = (
<div>
flag ? 【flag 为true 执行的逻辑】:【flag 为 false 执行的逻辑】
</div>
)

数组循环

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

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

组件用法

下面代码中依据 ES6 的方式定义组件；
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 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中国呢的值
    可以在事件的回调或者异步的回调操作里面可以这样操作数据的
    this.setState({
        name : '你好'
    })
    
    return(
        <div>
        <div>{this.state.name}</div>
        <div>你好</div>
        </div>
        
        
    )
}
}