條件渲染

1. if / else

render () {if (this.state.isLoading) { // 正在加載中return <h1>Loading...</h1>}return <div>這就是我們想要的內容</div>} // 鉤子函數 五秒鐘之后 修改狀態值componentDidMount () { setTimeout(() => {this.setState({isLoading : false})}, 3000);}

2. 三元表達式

return this.state.isLoading ? (<h1>Loading...</h1>) : (<div>這就是我們想要的內容</div>)

3. 邏輯運算符

return this.state.isLoading && (<h1>Loading...</h1>)

列表渲染

遍歷1

// 準備數據 state = {list :['小蘋果','大香蕉','黃橙子'] }return (<ul>{this.state.list.map(item => { return <li>{ item }</li>}) } </ul>)

遍歷2

// 準備數據 state = {list2: [{ id: 1, name: '春' }, { id: 2, name: '飛' }, { id: 3, name: '蓮' }] } // 遍歷return (<ul>{this.state.list2.map(item => { return <li key={item.id}>{ item.name }</li>}) }</ul>)

提取到函數

// render 鉤子函數 render () {return (<ul>{ this.renderLi() }</ul>)}// 提取到的一個函數 // 必須要有返回值 renderLi () { return this.state.list2.map(item => { return <li key={item.id}>{ item.name }</li>}) }

處理樣式

行內樣式

// 這個{{}} 不是雙括號語法, 而是單括號里面有個 樣式對象 //{} 可以拿到原始類型 <div style={{ color: 'pink', backgroundColor: 'yellowgreen', height: 300 }}>

外聯樣式

//1. 外部 index.css .red {color: red;font-size: 50px; }//2. 引入 import './index.css'//3. 添加類<p className='red' >哈哈</p>

評論案例

步驟

• 準備數據 - 列表展示

• 受控組件

• 表單頭部展示收集數據

• 補充 : 非受控組件

評論案例1 : 列表展示

• 準備數據

list: [{ id : 1, username :'張三', content :'做一個凡人' },{ id : 2, username :'李四', content :'貪財好色' },{ id : 3, username :'王五', content :'一身正氣' }],

• 展示

<ul>{this.state.list.map(item => { return (<li key={item.id}><p>評論人 : {item.username}</p><p>評論內容 : {item.content}</p></li>)}) } </ul>

評論案例2 : 受控組件

• 見下面的受控組件模塊

評論案例3 : 頭部展示

• 結構

<div>評論的人 :<inputonChange={e => this.getValues('username', e.target.value)} # +name="username"value={username}style={{ width: '214px' }}type="text"/><br />評論內容 :<textareaonChange={e => this.getValues('content', e.target.value)} # +name="content"value={content}cols="30"rows="10"></textarea><button onClick={this.add}>添加評論</button> </div>

• 處理表單數據

getValues = (name, value) => {this.setState({[name]: value}) }

• 添加評論

add = () => { // 獲取數組const { list, content, username } = this.state let obj = {id: +new Date(),content,name : username}this.setState({list: [obj, ...list],content: '',username :''}) }

評論案例4 : 非受控組件

• 見 下面 非受控組件模塊

受控組件

導入 : 給 input 添加了一個value ,展示默認值

受控組件介紹

• 表單元素 是用來收集數據的

• react 表單元素分為 : 受控組件 + 非受控組件

• 受控組件 : 受 React 控制的組件

• 如何成為受控組件 ? 給 input 添加value 值, 那么這個input 就成了受控組件

• M ==> V , V ==> M (我們自己處理)

- 1.需要給 input 添加 value 并且賦值 => M ==> V - 2.onChange={ this.handleInput } ==> 監聽 V 的數據變化, 收集值賦值給 M - 3. handleInput = (e) => {// 監聽input 的變化// (V) 拿到文本框的值, 修改 state 里面的數據(M)console.log(e,target.value)// 修改狀態this.setState({username : e.target.value})}

其他表單處理受控組件

// 文本輸入框 <input onChange={this.handleInput} value={username} type="text" /> <br /> // 文本域 <textarea onChange={this.handleTextarea} value={content} cols="30" rows="10"></textarea> // 下拉框 <select value={city} onChange={this.handleSelect}><option value="sh">上海</option><option value="hz">杭州</option><option value="bj">北京</option> </select>

• 處理

// 處理 input handleInput = (e) => { this.setState({username: e.target.value})}// 同上 .....

優化1

// 讓其他表單都綁定到一個事件中 // 文本輸入框 <input name='username' onChange={this.handleInput} value={username} type="text" /> <br /> // 文本域 <textarea name='content' onChange={this.handleTextarea} value={content} cols="30" rows="10"></textarea> // 下拉框 <select name='city' value={city} onChange={this.handleSelect}><option value="shanghai">上海</option><option value="hangzhou">杭州</option><option value="beijing">北京</option> </select>

• 處理

handle = e => { // console.log(e.target.name);this.setState({[e.target.name] : e.target.value})}

優化2

// 文本輸入框 <input onChange={(e) => this.getValues('username', e.target.value)} value={username} type="text" /> <br /> // 文本域 <textarea onChange={(e) => this.getValues('content', e.target.value)} value={content} cols="30" rows="10"></textarea> // 下拉框 <select value={city} onChange={ (e) => this.getValues('city', e.target.value) }><option value="shanghai">上海</option><option value="hangzhou">杭州</option><option value="beijing">北京</option> </select>

• 處理

getValues = (name, value) => { this.setState({[name] : value})}

非受控組件

導入 : 如果不想讓inptu 成為受控組件 , 又想添加默認值

####非受控組件介紹:

• 添加 defaultValue : <input type="text" defaultValue={this.state.name} />
• 它默認就是一個非受控組件
• 非受控組件操作 DOM 直接獲取 數據 – 通過 ref

使用步驟

• 1-創建 ref 引用

constructor(){super()// 方式1this.iptRef = React.createRef() } // 和 state 一樣 // 方式2: 屬性初始化語法 iptRef = React.createRef()

• 2-綁定 ref

<input ref={ this.iptRef } />

• 3-獲取數據

// 可以通過嘗試點擊按鈕 click = () => {console.log(this.iptRef.current.value) }

組件通訊

父傳子

• 通過普通的props屬性傳遞, 實現父傳子即可

// 父組件 class Parent extends React.Component {// 1. 準備好數據state = {pName : '父的數據'}render() {return (<div><p>哈哈</p>//2. 通過屬性 將數據傳遞給子組件<Child name={this.state.pName}></Child></div>)} } // 子組件 // 3. 通過 props 獲取數據 const Child = (props) => <div>子組件 { props.name }</div>

子傳父

• 思路 : 父組件中提供了一個方法, 由子組件調用這個方法, 將數據作為參數傳遞給父組件
• 步驟 :
  • 1-在父組件中提供一個方法
  • 2-將這個方法通過屬性傳遞給子組件
  • 3-子組件中通過props 拿到這個方法調用, 并且將數據作為參數傳遞

// 父組件 class Parent extends React.Component {// 第一步 :父組件準備一個方法pFn = (data) => { console.log('調用了',data);}render() {return (<div><p>哈哈</p>{/* 第二步 : 通過屬性將方法產傳遞給子組件 */}<Child cfn={ this.pFn } ></Child></div>)} } // 子組件 class Child extends React.Component { render () { return (<div><button onClick={this.sendMsg}>點擊發送</button></div>)}sendMsg = () => { // 第三步 : 子組件通過props 拿到這個方法, 并且傳參this.props.cfn('撩漢子')} }

兄弟組件通訊

• 思路 : 狀態提升

改造評論案例 ★

• 組件化

  • index.js => Comments父組件
  • components/
    • CommentsList.js ==> CommentsList 列表組件
    • CommentsLForm.js ==> CommentsLForm 表單組件

• 父傳子 => 把 list 傳給 CommentsList 組件 => 遍歷展示列表

• 子傳父 => 把表單里的數據新對象 => 點擊添加評論 => 傳給 Comments組件

• pGetData

• 添加評論

context

• 使用場景 : 跨多層組件傳遞數據
  • 如果兩個組件是 遠房親戚 的關系，此時，就可以使用 Context 來通訊。
• 畫圖 : One > Two > Three > Four
• Context 中提供了兩個組件
  • Provider 組件 : 提供組件, 提供數據
  • Consumer 組件 : 消費組件, 接收數據

// 1. 創建 Context 對象, 并解構出來兩個組件 const { Provider, Consumer } = React.createContext() # +//2. 類組件 class One extends React.Component {state = {color :'red'}render() {return (// 第二步 : 使用 Provider 組件包裹 one組件, 只有被包裹的部分里面才能獲取數據 // 通過 value 屬性提供要共享的數據<Provider value={ this.state.color }> # +<div><p> One </p><Two></Two></div></Provider>)} } class Two extends React.Component { .... } class Three extends React.Component {.... } class Four extends React.Component {render() {return (<div><p>Four</p>{/* 3.在 Four 組件中, 通過 consumer 來獲取數據 */}{/* 遵循的是 render-props 思想 后面介紹 */}<Consumer>{data => { return <p style={{ color : data }} >這是測試用的</p> # +}}</Consumer></div>)} }

總結

以上是生活随笔為你收集整理的React基础学习（第三天）的全部內容，希望文章能夠幫你解決所遇到的問題。

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