父組件把一個函數通過屬性或context的方式傳給子組件,子組件只要調用這個方法即可,在子組件中執行父組件的方法,可以傳遞值回去給父組件。
傳遞信息的方式:
1.屬性傳遞:
父組件把需要的信息傳遞給子組件:調取子組件的時候,基於屬性的方式傳遞給子組件(子組件的props存儲著傳遞的信息)
這種方式只能把父組件的信息傳遞給子組件,子組件無法直接的把信息傳遞給父組件
用屬性傳遞信息是單向傳遞的
2.context傳遞:16.3之前的api
父組件把需要給後代組件(子組件、孫組件)的使用信息設置在context中
後代組件需要用到父組件中的信息,主動去父組件中調用即可
(1)在父組件中設置子組件的context屬性值類型
static childContextTypes = {
propA: PropTypes.string,
methodA: PropTypes.func
};
(2)設置子組件的context屬性信息,return的是啥,相當於給子組件的context設置為啥
getChildContext () {
return {
propA: 'propA',
methodA: () => 'methodA'
}
}
(3)子組件中需要設置使用的context屬性值的類型,子組件中主動獲取需要的信息
設置哪個類型,子組件中才會哪個屬性,沒有設置的是不允許使用的,
並且父、子組件的類型要保持一致,不然會報錯
使用: const {xxxx} = this.context;
static contextTypes = {
propA: PropTypes.string
}
留言列表