react学习系列（二）

JSX 语法练习

在jsx语法中，需要书写js代码的时候，请先加上{ } 再书写js语法

import React,{ Component } from 'react'

let name ="小明", num1=20, num2=30, arr=[1,2,3,4,5]

export default class App extends Component {render(){return(<div>{/* 这是注释的格式 */}{/* JSX中引用变量需要加单花括号 */}<p>{name}</p>{/* 三目运算符的使用 */}<p>num1和num2中比较大的是：{num1>num2? num1: num2}</p>{/* for循环的使用 */}<ul>{/* 数组名.map(函数) */}{//格式1：
            arr.map((v,k)=>(<li key={k}>{v}</li>))}</ul></div>)}}

双向数据绑定

React中没有类似vue的 v-model 指令，因此要实现双向数据绑定，只能操作 value 和 onChange(或onInput)事件

import React,{ Component } from 'react'// 双向数据绑定

export default class App extends Component {
    state ={
        msg:"你好世界"}render(){return(<div><input type="text" value={this.state.msg} onChange={(e)=>this.changeFn(e)}/><h2>{this.state.msg}</h2></div>)}// input的输入事件changeFn(e){
        this.setState({
            msg: e.currentTarget.value
        })}}