React父子組件間的通信是怎樣進行的
父子組件通信方式
(1)傳遞數(shù)據(jù)(父傳子)與傳遞方法(子傳父)
(2)ref標記(父組件拿到子組件的引用,從而調(diào)用子組件的方法)
父傳子
使用 props屬性,傳入props
this.props.數(shù)據(jù)
//父組件 <Field label="用戶名"></Field> //子組件 <label>{this.props.label}</label>
子傳父
父組件向子組件傳一個函數(shù),然后通過子組件中這個函數(shù)的回調(diào),拿到子組件穿過的值
this.props.函數(shù)名()
//子組件 <input onChange={(evt)=>{ this.props.onChangeEvent(evt.target.value) }}></input> //父組件 <Field onChangeEvent={(value)=>{ console.log(value) }}></Field>
ref標記(傳遞數(shù)據(jù))
在組件身上綁定ref,直接通過 this.username.current 獲得整個組件,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ù)來實現(xiàn)
clear(){ this.setState({ value:'' }) } <input value={this.state.value}></input> .................... this.username.current.clear()//父
非父子組件通信方式
狀態(tài)提升(兄弟通信)
React中的狀態(tài)提升概括來說,就是將多個組件需要共享的狀態(tài)提升到它們最近的父組件上,在父組件上改變這個狀態(tài)然后通過props分發(fā)給子組件
發(fā)布訂閱模式
兄弟組件AB,子組件A將值傳給B組件,在子組件A中發(fā)布,在子組件B中訂閱,,此方法適合任意關(guān)系的通信
調(diào)度中心bus:
var bus={ list:[],//放入所有的訂閱 //訂閱 subscribe(callback){ this.list.push(callback) //callback為注冊訂閱的回調(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)用時,傳入?yún)?shù),觸發(fā)bus中publish函數(shù)并接收到數(shù)據(jù)即text,調(diào)用callback回調(diào)函數(shù),傳入text,此時調(diào)用者subscribe將收到參數(shù)為value,即將組件A數(shù)據(jù)傳入組件B中
context狀態(tài)樹傳參(跨組件方案)
Context 提供了一種在組件之間共享此類值的方式,是“全局”的數(shù)據(jù),而不必顯式地通過組件樹的逐層傳遞 props。
context上下文對象來管理公共狀態(tài),來實現(xiàn)數(shù)據(jù)的修改
1.創(chuàng)建context對象
const GlobalContext = React.createContext()
2.創(chuàng)建提供數(shù)據(jù)的父組件Provider
給Provider組件設(shè)置value屬性,需要傳遞到后代組件中的數(shù)據(jù)作為value的值
當Provider發(fā)生數(shù)據(jù)value變更時,會觸發(fā)到Consumer發(fā)生渲染,所有被其包裹的子組件都會發(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ù)
某些時候需要內(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>
實現(xiàn)了將組件A的值傳給了組件B的值
React插槽
作用:為了復(fù)用;一定程度減少父子通信
children實現(xiàn)插槽
在React組件中直接包裹一些html標簽,html標簽內(nèi)容是否會出現(xiàn)呢?
<Child> <div>111</div> <div>22</div> <div>333</div> </Child>
由上圖可見,被包裹的html標簽并未被渲染出來,這是因為當讀取到Child組件時,會重新渲染頁面覆蓋被包裹的html標簽;而我們可以在Child組件中留下html標簽的位置,以便來顯示被包裹的html,這種做法即為 插槽
語法
使用props的固定屬性children在Child組件中占位
this.props.children //該屬性中包含子組件標簽開始到結(jié)束之間的內(nèi)容
父組件的子組件標簽中寫入要插入到子組件的html標簽
export default class App extends Component { render() { return ( <div> <Child> <div>111</div> <div>22</div> <div>333</div> </Child> </div> ) } }
在子組件中放入該標簽
class Child extends Component{ render(){ return( <div> child {this.props.children} </div> ) } }
多個元素的children
如果children中有多個元素,那么children為一個數(shù)組,數(shù)組中放著所有存放的內(nèi)容
//父組件 <Child> <div>111</div> <div>22</div> <div>333</div> </Child> //子組件 <div> child <h3>以下獲得所有內(nèi)容</h3> {this.props.children} <h3>以下獲得數(shù)組其中的元素</h3> {this.props.children[1]} </div>
注意:以上方法實現(xiàn)了 可以通過被 插槽的內(nèi)容來直接操作父組件,以此給子組件傳遞數(shù)據(jù)(被 插入的內(nèi)容連同數(shù)據(jù)一起插入子組件中)
到此這篇關(guān)于React父子組件間的通信是怎樣進行的的文章就介紹到這了,更多相關(guān)React組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React??memo允許你的組件在?props?沒有改變的情況下跳過重新渲染的問題記錄
使用?memo?將組件包裝起來,以獲得該組件的一個?記憶化?版本,只要該組件的?props?沒有改變,這個記憶化版本就不會在其父組件重新渲染時重新渲染,這篇文章主要介紹了React??memo允許你的組件在?props?沒有改變的情況下跳過重新渲染,需要的朋友可以參考下2024-06-06基于CSS實現(xiàn)MaterialUI按鈕點擊動畫并封裝成 React 組件
筆者先后開發(fā)過基于vue,react,angular等框架的項目,碧如vue生態(tài)的elementUI, ant-design-vue, iView等成熟的UI框架, react生態(tài)的ant-design, materialUI等,這些第三方UI框架極大的降低了我們開發(fā)一個項目的成本和復(fù)雜度,使開發(fā)者更專注于實現(xiàn)業(yè)務(wù)邏輯和服務(wù)化2021-11-11React實現(xiàn)下拉框的key,value的值同時傳送
這篇文章主要介紹了React實現(xiàn)下拉框的key,value的值同時傳送方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08