close

父組件把一個函數通過屬性或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
  }

 

arrow
arrow
    文章標籤
    React context props
    全站熱搜

    bingzhichen 發表在 痞客邦 留言(0) 人氣()