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学习系列（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。