0


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
        })}}
标签: react 前端

本文转载自: https://blog.csdn.net/m0_47074226/article/details/123685414
版权归原作者 LQG_97 所有, 如有侵权,请联系我们删除。

“react学习系列(二)”的评论:

还没有评论