您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“React父子組件間的通信是如何進(jìn)行的”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
(1)傳遞數(shù)據(jù)(父?jìng)髯樱┡c傳遞方法(子傳父)
(2)ref標(biāo)記(父組件拿到子組件的引用,從而調(diào)用子組件的方法)
使用 props屬性,傳入props
this.props.數(shù)據(jù)
//父組件 <Field label="用戶名"></Field> //子組件 <label>{this.props.label}</label>
父組件向子組件傳一個(gè)函數(shù),然后通過子組件中這個(gè)函數(shù)的回調(diào),拿到子組件穿過的值
this.props.函數(shù)名()
//子組件 <input onChange={(evt)=>{ this.props.onChangeEvent(evt.target.value) }}></input> //父組件 <Field onChangeEvent={(value)=>{ console.log(value) }}></Field>
在組件身上綁定ref,直接通過 this.username.current 獲得整個(gè)組件,this.username.current.state獲得子組件內(nèi)state數(shù)據(jù)
this.ref名.current
//子組件中 state={ value:'' } <input onChange={(evt)=>{ this.setState({ value:evt.target.value }) }}></input> //父組件 username = React.createRef() <Field ref={this.username}></Filed> .... console.log(this.username.current.state.value)
父組件中清除子組件的值:在子組件中定義修改state函數(shù),父組件中調(diào)用此函數(shù)來實(shí)現(xiàn)
clear(){ this.setState({ value:'' }) } <input value={this.state.value}></input> .................... this.username.current.clear()//父
React中的狀態(tài)提升概括來說,就是將多個(gè)組件需要共享的狀態(tài)提升到它們最近的父組件上,在父組件上改變這個(gè)狀態(tài)然后通過props分發(fā)給子組件
兄弟組件AB,子組件A將值傳給B組件,在子組件A中發(fā)布,在子組件B中訂閱,,此方法適合任意關(guān)系的通信
調(diào)度中心bus:
var bus={ list:[],//放入所有的訂閱 //訂閱 subscribe(callback){ this.list.push(callback) //callback為注冊(cè)訂閱的回調(diào)函數(shù) } //發(fā)布 publish(){ } }
1.訂閱消息
//創(chuàng)建訂閱的回調(diào)函數(shù) subscribe(callback){ console.log(callback); this.list.push(callback) } //訂閱者 bus.subscribe((value)=>{ console.log(111,value); }) bus.subscribe((value)=>{ console.log(222,value); })
2.發(fā)布消息
//創(chuàng)建bus(調(diào)度中心)中的發(fā)布函數(shù) publish(text){ //遍歷所有的list,將回調(diào)函數(shù)執(zhí)行 // console.log(this.list); this.list.forEach(callback=>{ callback && callback(text) }) } //發(fā)布者 setTimeout(()=>{ bus.publish('沉默') },0)
bus.publish調(diào)用時(shí),傳入?yún)?shù),觸發(fā)bus中publish函數(shù)并接收到數(shù)據(jù)即text,調(diào)用callback回調(diào)函數(shù),傳入text,此時(shí)調(diào)用者subscribe將收到參數(shù)為value,即將組件A數(shù)據(jù)傳入組件B中
Context 提供了一種在組件之間共享此類值的方式,是“全局”的數(shù)據(jù),而不必顯式地通過組件樹的逐層傳遞 props。
context上下文對(duì)象來管理公共狀態(tài),來實(shí)現(xiàn)數(shù)據(jù)的修改
1.創(chuàng)建context對(duì)象
const GlobalContext = React.createContext()
2.創(chuàng)建提供數(shù)據(jù)的父組件Provider
給Provider組件設(shè)置value屬性,需要傳遞到后代組件中的數(shù)據(jù)作為value的值
當(dāng)Provider發(fā)生數(shù)據(jù)value變更時(shí),會(huì)觸發(fā)到Consumer發(fā)生渲染,所有被其包裹的子組件都會(huì)發(fā)生渲染(render被調(diào)用)
//格式 state={ info:'111' } render(){ return( <GlobalContext.Provider value={{ //key:value或key:函數(shù) }}> <div>父組件內(nèi)容</div> </GlobalContext.Provider> ) }
3.創(chuàng)建接受數(shù)據(jù)的子孫組件Consumer
//格式 render(){ return( <GlobalContext.Consumer> { (value)=>{ return( <div onClick={()=>{ }}> </div> ) } } </GlobalContext.Consumer> ) }
4.在子孫組件A中調(diào)用Provider中的回調(diào)函數(shù)
某些時(shí)候需要內(nèi)部組件去更新Context的數(shù)據(jù),只需要向上下文添加回調(diào)函數(shù)即可
//子組件A中 調(diào)用回調(diào)函數(shù),傳遞數(shù)據(jù) value.chageInfo(synopsis) //父組件 state={ info:111 } ...................................... <GlobalContext.Provider value={{ "name":"說名字", "info":this.state.info, chageInfo:(content)=>{ this.setState({ info:content }) } }}>
全局定義狀態(tài),并修改狀態(tài)
5.子孫組件B中接收Provider的數(shù)據(jù)
<GlobalContext.Consumer> { (value)=><div className="filmDetail"> //接受Provider的數(shù)據(jù) detail-{value.info} </div> } </GlobalContext.Consumer>
實(shí)現(xiàn)了將組件A的值傳給了組件B的值
作用:為了復(fù)用;一定程度減少父子通信
在React組件中直接包裹一些html標(biāo)簽,html標(biāo)簽內(nèi)容是否會(huì)出現(xiàn)呢?
<Child> <div>111</div> <div>22</div> <div>333</div> </Child>
由上圖可見,被包裹的html標(biāo)簽并未被渲染出來,這是因?yàn)楫?dāng)讀取到Child組件時(shí),會(huì)重新渲染頁面覆蓋被包裹的html標(biāo)簽;而我們可以在Child組件中留下html標(biāo)簽的位置,以便來顯示被包裹的html,這種做法即為 插槽
語法
使用props的固定屬性children在Child組件中占位
this.props.children //該屬性中包含子組件標(biāo)簽開始到結(jié)束之間的內(nèi)容
父組件的子組件標(biāo)簽中寫入要插入到子組件的html標(biāo)簽
export default class App extends Component { render() { return ( <div> <Child> <div>111</div> <div>22</div> <div>333</div> </Child> </div> ) } }
在子組件中放入該標(biāo)簽
class Child extends Component{ render(){ return( <div> child {this.props.children} </div> ) } }
如果children中有多個(gè)元素,那么children為一個(gè)數(shù)組,數(shù)組中放著所有存放的內(nèi)容
//父組件 <Child> <div>111</div> <div>22</div> <div>333</div> </Child> //子組件 <div> child <h4>以下獲得所有內(nèi)容</h4> {this.props.children} <h4>以下獲得數(shù)組其中的元素</h4> {this.props.children[1]} </div>
注意:以上方法實(shí)現(xiàn)了 可以通過被 插槽的內(nèi)容來直接操作父組件,以此給子組件傳遞數(shù)據(jù)(被 插入的內(nèi)容連同數(shù)據(jù)一起插入子組件中)。
“React父子組件間的通信是如何進(jìn)行的”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。