react(二) 元件的通訊

2022-04-25 05:47:42 字數 1992 閱讀 6752

對於元件來說,通訊無非兩種,父子元件通訊,和非父子元件通訊

一、父子父子元件通訊

1、父元件給子元件傳值

對於父元件來說,props是他們之間的媒介

class parent extends component;

componentdidmount() );

}, 1000);

} render() />;}}

class child_1 extends component}}

子元件通過接受父元件的props來獲取父元件中的資料

2、子元件給父元件傳值

途徑是先在父元件中註冊乙個**函式,子元件通過props獲取到這一**函式並執行

class parent extends component;

transfermsg(msg) );

} render()

this.transfermsg(msg)} />

;}}class child_1 extends component, 1000);

} render()

}

這樣在子元件中用傳參的方式,獲取到子元件中的資料,進而改變了父元件的狀態

3、祖先元件給後代元件(就是元件之間的巢狀已經超過一層)

這樣的話也還可以通過props來傳值,但是一層一層的傳有點麻煩,我們可以使用... 運算子(三個點是es6裡面的剩餘展開屬性),以更簡潔的方式傳遞給更深層級的子元件。通過這種方式,不用考慮效能的問題,通過 babel 轉義後的... 運算子效能和原生的一致

class child_1 extends component}}

class child_1_1 extends component

}}

二、非父子元件之間的傳值

對於非父子元件來說缺少連線的紐帶,很難通過props聯絡到一起(要是不是很遠的話也能用,但是要是過深就特別麻煩),但是我們可以使用全域性的一些機制來實現,比如react提供了一種上下文機制

class brother1 extends react.component

} render()>更新兄弟元件

) }

}brother1.contexttypes=class brother2 extends react.component

} render()

) }

}brother2.contexttypes=class parent extends react.component

} getchildcontext()

}refresh())

}} render()/>

) }

}parent.childcontexttypes=

使用getchildcontext方法將屬性傳遞給子元件,並使用childcontexttypes宣告傳遞資料型別,子元件中需要顯式地使用contexttypes宣告需要用到的屬性的資料型別。

需要傳遞進context引數才可以在constructor方法中使用context,要不然react將會報錯。

在元件中,通過this.context訪問context中的屬性或方法。

未完待續。。。

關於元件之間的通訊還有更好的方式,比如說用redux來管理資料流,之後單獨整理關於redux的部分。

VUE 元件(二)元件通訊

元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時,就要用到自定義事件 子元件用 emit 來觸發事件,父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果,在改變元件data中的count後,通過 emit 將值傳給父元件,父元件用v o...

React 快速上手 2 元件通訊

父元件可以通過設定子元件的props屬性進行向子元件傳值,同時也可以傳遞乙個 函式,來獲取到子元件內部的資料。效果演示 子元件是輸入框,父元件及時獲取到輸入框內容然後更新右邊標籤。父元件傳遞 函式 父元件傳遞乙個方法,即updatespan,用於更新span內容。class father exten...

Vue 二 元件間通訊

父元件中定義元素 如job 初始化 data 資料 data function 父元件中子元件標籤中定義並繫結資料 如 job job 等號左邊屬性名需和子元件定義 呼叫的寫法一樣,右邊表示父元件中的資料元素 name name job job namewasreset name event res...