一、JSX 嵌入變量
- 情況一：當(dāng)變量是
Number焙矛、String、Array類型時(shí)残腌，可以直接顯示村斟。 - 情況二：當(dāng)變量是
Null、undefined废累、Boolean類型時(shí)邓梅，內(nèi)容為空。
如果希望顯示Null邑滨、undefined日缨、Boolean，那么需要轉(zhuǎn)成字符串掖看；
轉(zhuǎn)換方式有：toString方法匣距、空字符串拼接、String(變量)等方式哎壳； - 情況三：對(duì)象類型不能作為子元素毅待。
二、JSX 中綁定 class & style
class：
render() {
const { active } = this.state;
return (
<div>
{/* 添加 class 屬性 */}
<div className={'a b ' + (active ? 'active' : '')}>box1</div>
<div className={'a b ' + (active ? '' : 'active')}>box2</div>
</div >
)
}
style：
<div style={{ color: 'red', fontSize: '20px', backgroundColor: 'pink' }}>綁定 style 樣式</div>
三归榕、JSX 中綁定事件（解決 this 為 undefined）
方案一：通過(guò) bind 綁定 this(顯示綁定)
class Demo extends React.Component {
constructor() {
super();
this.state = {
num: 0
}
// 多次調(diào)用使用
this.add = this.add.bind(this);
}
render() {
const { num } = this.state;
return (
<div>
<div>{num}</div>
{/* 一次調(diào)用 */}
<button onClick={this.add.bind(this)}>加1</button>
{/* 多次調(diào)用 */}
<button onClick={this.add}>加1</button>
</div >
)
}
add() {
this.setState({
num: this.state.num + 1
})
}
}
方案二：定義函數(shù)時(shí)尸红，使用箭頭函數(shù)
class Demo extends React.Component {
constructor() {
super();
this.state = {
num: 0
}
}
render() {
const { num } = this.state;
return (
<div>
<div>{this.state.num}</div>
<button onClick={this.add}>加1</button>
</div >
)
}
// 使用箭頭函數(shù)
add = () => {
this.setState({
num: this.state.num + 1
})
}
}
方案三(推薦)：直接傳入一個(gè)箭頭函數(shù)，在箭頭函數(shù)中調(diào)用需要執(zhí)行的方法
class Demo extends React.Component {
constructor() {
super();
this.state = {
num: 0
}
}
render() {
const { num } = this.state;
return (
<div>
<div>{this.state.num}</div>
<button onClick={() => { this.add() }}>加1</button>
</div >
)
}
// 使用箭頭函數(shù)
add() {
this.setState({
num: this.state.num + 1
})
}
}
四刹泄、條件渲染
class Demo extends React.Component {
constructor() {
super();
this.state = {
isLogin: true
}
}
render() {
const { isLogin } = this.state;
let loginText = null;
if (isLogin) {
loginText = '歡迎回來(lái)~'
} else {
loginText = '請(qǐng)先登錄~'
}
return (
<div>
{/* 方案一：使用 if 判斷 */}
<h2>{loginText}</h2>
{/* 方案二：使用三目運(yùn)算符 */}
<button onClick={e => this.loginChange()}>{isLogin ? '退出' : '登錄'}</button>
<hr />
{/* 方案三：使用邏輯與 && */}
{isLogin && <h2>同學(xué)外里，你好~</h2>}
</div >
)
}
loginChange() {
this.setState({
isLogin: !this.state.isLogin
})
}
}
五、獲取 DOM 元素（ref）
import React, { PureComponent, createRef } from 'react'
class App extends PureComponent {
constructor(props) {
super(props);
this.titleRef = createRef();
this.titleEl = null;
}
render() {
return (
<div>
<h2 ref="titleRef">Hello React</h2>
<h2 ref={this.titleRef}>Hello React</h2>
<h2 ref={el => this.titleEl = el}>Hello React</h2>
<button onClick={() => this.changeText()}>改變文本</button>
</div>
);
}
changeText() {
// 方式一：通過(guò) refs 獲取 DOM 元素
this.refs.titleRef.innerHTML = '你好 React'
// 方式二：通過(guò)對(duì)象 createRef() 獲取 DOM 元素
this.titleRef.current.innerHTML = '你好 JavaScript'
// 方式三：通過(guò)回調(diào)函數(shù)獲取 DOM 元素
this.titleEl.innerHTML = '你好 HTML'
}
}
ref 的值根據(jù)節(jié)點(diǎn)的類型而有所不同：
- 當(dāng) ref 屬性用于 HTML 元素時(shí)特石，構(gòu)造函數(shù)中使用 React.createRef() 創(chuàng)建的 ref 接收底層 DOM 元素作為其 current 屬性盅蝗；
- 當(dāng) ref 屬性用于自定義 class 組件時(shí)，ref 對(duì)象接收組件的掛在實(shí)例作為其 current 屬性姆蘸；
- 不能在函數(shù)組件上使用 ref 屬性墩莫，因?yàn)楹瘮?shù)組件沒(méi)有實(shí)例；
六逞敷、受控組件和非受控組件
受控組件：
import React, { PureComponent } from 'react';
class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
valid: ''
}
}
render() {
const { username, password, valid } = this.state;
return (
<div>
<form onSubmit={(e) => this.handleSubmit(e)}>
<div>
<label htmlFor="username">
用戶：<input type="text" id="username" name="username" value={username} onChange={(e) => this.handleChange(e)} />
</label>
</div>
<div>
<label htmlFor="password">
用戶：<input type="password" id="password" name="password" value={password} onChange={(e) => this.handleChange(e)} />
</label>
</div>
<div>
<label htmlFor="valid">
用戶：<input type="number" id="valid" name="valid" value={valid} onChange={(e) => this.handleChange(e)} />
</label>
</div>
<input type="submit" />
</form>
</div>
);
}
// 用戶輸入后狂秦，通過(guò) handleChange 更新 state 中的值
handleChange(e) {
this.setState({
[e.target.name]: e.target.value
})
}
handleSubmit(e) {
e.preventDefault();
console.log(this.state);
}
}
export default App;
非受控組件：
import React, { PureComponent, createRef } from 'react';
class App extends PureComponent {
constructor(props) {
super(props);
this.username = createRef();
}
render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<label htmlFor="username">
用戶：<input type="text" ref={this.username} />
</label>
<input type="submit" />
</form>
</div>
);
}
// 通過(guò) ref 獲取表單元素的 value 值
handleSubmit(e) {
e.preventDefault();
console.log(this.username.current.value);
}
}
export default App;
七、腳手架文件列表
image.png
