React Context詳解使用過(guò)程
1.Context是干嘛的
一種React組件間通信方式, 常用于【祖組件】與【后代組件】間通信
2.可以倒是可以實(shí)現(xiàn)的做法-props逐級(jí)傳遞
import React, { Component } from "react"; import "./index.css"; export default class A extends Component { state = { username: "tom", age: 18 }; render() { const { username, age } = this.state; return ( <div className="parent"> <h3>我是A組件</h3> <h4>我的用戶(hù)名是:{username}</h4> <B username={username} age={age}></B> </div> ); } } class B extends Component { render() { console.log(this.props); const { username, age } = this.props; return ( <div className="child"> <h3>我是B組件</h3> <C username={username} age={age} /> </div> ); } } function C(props) { const { username, age } = props; return ( <div className="grand"> <h3>我是C組件</h3> <h4> 我從A組件接收到的用戶(hù)名:{username},年齡是{age} </h4> </div> ); }
這里C組件用了下函數(shù)式組件的寫(xiě)法
但是這種寫(xiě)法有很多的不太好的地方,如果層級(jí)再深一點(diǎn)呢,傳的值再多一點(diǎn)呢??隙〞?huì)有很多的重復(fù)代碼出現(xiàn),而且我只想要祖組件和孫組件通信,這樣寫(xiě)的話其實(shí)是每個(gè)組件都在通信了的
3.Context
Context的就可以挺好的適用于這種場(chǎng)景
創(chuàng)建Context容器對(duì)象:
const XxxContext = React.createContext()
2) 渲染子組時(shí),外面包裹xxxContext.Provider, 通過(guò)value屬性給后代組件傳遞數(shù)據(jù):
<xxxContext.Provider value={數(shù)據(jù)}>
子組件
</xxxContext.Provider>
3) 后代組件讀取數(shù)據(jù):
//第一種方式:僅適用于類(lèi)組件
static contextType = xxxContext // 聲明接收context
this.context // 讀取context中的value數(shù)據(jù)
//第二種方式: 函數(shù)組件與類(lèi)組件都可以
<xxxContext.Consumer>
{
value => ( // value就是context中的value數(shù)據(jù)
要顯示的內(nèi)容
)
}
</xxxContext.Consumer>
上代碼
import React, { Component } from "react"; import "./index.css"; //創(chuàng)建Context對(duì)象 const MyContext = React.createContext(); const { Provider, Consumer } = MyContext; export default class A extends Component { state = { username: "tom", age: 18 }; render() { const { username, age } = this.state; return ( <div className="parent"> <h3>我是A組件</h3> <h4>我的用戶(hù)名是:{username}</h4> //如果傳的只有一個(gè)值例如username,應(yīng)該式value={username},后面就是直接獲取了,不需要再屬性名取值了 <Provider value={{ username, age }}> <B /> </Provider> </div> ); } } class B extends Component { render() { return ( <div className="child"> <h3>我是B組件</h3> <C/> </div> ); } } class C extends Component { //聲明接收context static contextType = MyContext render() { const {username,age} = this.context return ( <div className="grand"> <h3>我是C組件</h3> <h4>我從A組件接收到的用戶(hù)名:{username},年齡是{age}</h4> </div> ) } } // function C() { // return ( // <div className="grand"> // <h3>我是C組件</h3> // <h4> // 我從A組件接收到的用戶(hù)名: // {/* <Consumer>{(value) => `${value.username},年齡是${value.age}`}</Consumer> */} // </h4> // </div> // ); // }
到此這篇關(guān)于React Context詳解使用過(guò)程的文章就介紹到這了,更多相關(guān)React Context內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React Native中NavigatorIOS組件的簡(jiǎn)單使用詳解
這篇文章主要介紹了React Native中NavigatorIOS組件的簡(jiǎn)單使用詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01詳解Jotai Immer如何實(shí)現(xiàn)undo redo功能示例詳解
這篇文章主要為大家介紹了詳解Jotai Immer如何實(shí)現(xiàn)undo redo功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04React之錯(cuò)誤邊界 Error Boundaries示例詳解
這篇文章主要為大家介紹了React之錯(cuò)誤邊界Error Boundaries示例教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10詳解react、redux、react-redux之間的關(guān)系
這篇文章主要介紹了詳解react、redux、react-redux之間的關(guān)系,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04React中遍歷數(shù)組生成標(biāo)簽問(wèn)題
這篇文章主要介紹了React中遍歷數(shù)組生成標(biāo)簽問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01