在react中,為了解決html標籤構建應用的不足,將公共的功能單獨抽離成乙個檔案作為乙個元件,在使用的地方按需引入,既然是元件彼此呼叫,就會涉及到父子元件的通訊,下面主要來總結簡單的元件通訊。
要在子元件中獲取父元件傳遞的值,只需要兩步就可以了:
在呼叫子元件的時候定義乙個屬性
子元件裡面 this.props.msg
根據這兩步,我們分別修改header.js和news.js
在子元件中使用父元件的方法,需要分成3步:
在父元件中定義方法;
在呼叫子元件的時候繫結該方法
在子元件中使用該方法。
我們將上面的**稍作調整,在父元件header.js中定義乙個執行列印語句的方法
然後在呼叫子元件的時候,繫結這個方法
最後,在子元件news.js中的乙個按鈕上新增點選事件,通過點選事件呼叫該方法。
想要在父元件中獲取子元件的資料和方法,可以先在父元件中獲取整個子元件例項,繼而再獲取例項和方法就可以了。
然後在父元件中呼叫子元件的時候指定ref的值 ,並通過this.refs.header 獲取整個子元件例項
當我們執行父元件的點選事件時,就可以使用子元件的方法和資料了。
完整的父子元件**如下:
header.js
import react, fromnews.js'react
'class
header extends component
}childfun=()=>
render()
}export
default header;
import react, from上面,通過在父元件中獲取整個子元件的例項,從而獲取了元件的資料和方法,其實,在子元件中,也可以獲取整個父元件的例項,從而獲取父元件的資料和方法。'react
'import header
from
'./header
'class
news extends component
}run=()=>
getheader=()=>)
}render()
this.getheader}>執行子元件的方法
) }
}export
default news;
首要,父元件中定義資料和方法,並在呼叫子元件的時候,定義乙個屬性,傳入this,即當前元件。
然後在子元件中,可以直接使用這些資料和方法
當然了,這種情況下也可以很方便的將子元件的資料傳遞到父元件了,而不在需要通過在父元件中獲取整個子元件了。
react元件與元件之間的資料傳遞
常規的資料傳遞方式就是父傳子,子元件直接通過this.props來使用。子元件通過父元件的事件方法來傳遞 例如 父元件 export default class search extends component this.setserviceview this.setserviceview.bind...
React 資料傳遞 資料變化
在頁面中引用header時,這樣寫,即給header元件設定乙個title屬性,而在header元件中可以這樣取到 render p p div hello index.jsx頁面 render return title hello頁面 aaa onclick hello world p div 在...
331 react資料傳遞
react資料傳遞 react資料傳遞 1.state 2.props 3.context 一.建構函式 constructor 二.state constructor add 我們來看下完整 import react,from react constructor add render 三.prop...