關於React父子元件通訊知識總結

常好樂發表於2017-09-19

父元件呼叫子元件方法

父元件要呼叫子元件的方法時,可以先給父元件js檔案中的子元件的標籤標記上一個ref的引數,例如:ref=”getSonfunction”,然後在父元件js檔案中需要呼叫子元件方法的位置寫上:this.refs.getSonfunction.子元件方法名() 就可以呼叫子元件方法了。
特殊地,如果子元件是一個react.router的一個路由標籤,則不可在路由標籤裡直接傳遞引數,因為路由標籤不允許自定義引數,則需要在render裡面用到React.cloneElement去克隆一個模擬的標籤去代替那個路由標籤,其中React.cloneElement接收的第一個引數為一個元件標籤或一個標籤,第二個引數給標籤需要傳遞的引數(用鍵值對的形式並用大括號包起來)或者(注意是或者)是this.state(也就是把react.state裡面的引數拿來作為它的引數)。
例如:①{React.cloneElement(this.props.children,this.state) }
或者:②{React.cloneElement(this.props.children,{ref:"getsonfunction"}) }
(提示:如果既想傳遞this.state又想傳遞自定義引數{ref:"getsonfunction"},則可以直接將自定義引數寫入到react的state裡面 ref:”getsonfunction”)再直接套用①的模板即可。
其中,this.props代表 父route,this.props.children為父route下面的所有子route,將this.state裡的引數或者(注意是或者)一個自定義引數{ref:”getsonfunciton”} 這兩個引數傳遞給 所有的子route標籤。這樣就可以實現,即使因為router路由標籤不能為其新增屬性值的情況。就可以利用react.cloneElement的形式去傳遞值。即可。(值得注意的是傳遞自定義屬性時,一定要用{}括號給包裹起來。)
更值得一提的是,ref屬性(例如ref=”hello”)是為了給新增ref屬性的標籤做上記號,在react的方法中可以實現this.refs.hello去獲取到這個標籤,然後進行操作。就相當於起到了jQuery中的標籤選擇器一樣的作用。

子元件呼叫父元件方法

子元件要呼叫父元件的方法時,在子元件呼叫父元件方法的寫法為:this.props.getdadfunction(),然後再父元件js檔案的相對應子元件標籤新增 屬性:getdadfunction={this.父元件方法名}。就可以實現子元件呼叫父元件方法了。

相關文章