react元件的通訊

2021-09-26 05:22:43 字數 936 閱讀 3492

一:父子元件的通訊 :通過props屬性,在父元件中,將父元件的資料繫結到子元件標籤身上

在子元件中通過this.props 可以檢視到父元件傳遞過來的資料

傳遞的資料有倆種,模擬的資料 和 請求得到的資料,在react中我們在componetdidmount鉤子內請求資料

注意:⭐⭐⭐

資料請求(互動型資料)會導致元件至少渲染倆次,第一次是沒有資料的,第二次才有了資料,這個時候傳遞給子元件的資料,在子元件中渲染的時候一定要記得做判斷,

判斷這個資料是否已經獲取到,然後渲染渲染 通過與運算子/三目/還有就是:對元素內的

二 :子父元件通訊(元件的狀態只能自己改)

也是通過屬性繫結實現的

所以,元件的資料的需要在父元件內定義方法,用來改變自己的資料,然後將方法傳遞給子元件,子元件呼叫該方法,並傳遞引數

三:非父子元件通訊:通過乙個共同的父元素:元件的狀態只能由自己改變,我們想 讓姐姐這個元件,通過父元件,來操作弟弟這個元件,首先在弟弟這個元件定義乙個資料,在定義乙個方法來控制自己的行為,在父元件內,在子元件身上新增ref屬性,在父元件中,就可以拿到子元件的一切資訊( }>)

在這裡我們可以看出 ,這裡的son元件繫結的ref 屬性 等於乙個箭頭函式,這個箭頭函式的引數就是這個son元件,我們賦值給了this.son 這裡this指向的就是父元件,所以我們在父元件中就可以取到子元件son的方法 ,然後在父元件中定義乙個方法,將 子元件的方法 return出去

father_fn =()=>{

return this.son.son_fn()//因為父元件的函式是乙個箭頭函式,所以子元件的函式後面的方法要呼叫(加括號

然後我們在將父元件這個方法在父元件中繫結在姐姐這個子元件上,然後在姐姐這個子元件中在乙個事件中通過this.props呼叫父元件傳遞過來的函式

四:跨元件通訊

react 元件通訊

父元件通過props向子元件傳遞需要的資訊 parent.jsximport react,from react import son from components test1 class parent extends component render export default parent c...

React元件通訊

分類 父子元件通訊 無論父元件傳遞是props還是state,子元件都是通過props接收 子父元件通訊 父元件傳遞方法給子元件,子元件呼叫父元件傳遞過來的方法 注意 自己的狀態自己更改 非父子元件通訊 ref鏈 1.ref this.refs.2.ref this.推薦 跨元件通訊 context...

react元件通訊

元件是封閉的,要接收外部資料應該通過 props 來實現 props的作用 接收傳遞給元件的資料 傳遞資料 給元件標籤新增屬性 接收資料 函式元件通過引數props接收資料,類元件通過 this.props 接收資料 function hello props class hello extends ...