react 元件之間的通訊

2022-07-01 17:33:11 字數 400 閱讀 5297

react推崇的是單向資料流,自上而下進行資料的傳遞,但是由下而上或者不在一條資料流上的元件之間的通訊就會變的複雜。解決通訊問題的方法很多,如果只是父子級關係,父級可以將乙個**函式當作屬性傳遞給子級,子級可以直接呼叫函式從而和父級通訊。

元件層級巢狀到比較深,可以使用上下文context來傳遞資訊,這樣在不需要將函式一層層往下傳,任何一層的子級都可以通過this.context直接訪問。

兄弟關係的元件之間無法直接通訊,它們只能利用同一層的上級作為中轉站。而如果兄弟元件都是最高層的元件,為了能夠讓它們進行通訊,必須在它們外層再套一層元件,這個外層的元件起著儲存資料,傳遞資訊的作用,這其實就是redux所做的事情。

元件之間的資訊還可以通過全域性事件來傳遞。不同頁面可以通過引數傳遞資料,下個頁面可以用location.query來獲取。

react父子元件之間通訊

父子元件之間通訊 父傳子通訊 類元件 index.js import react from react import reactdom from react dom reactdom.render document.getelementbyid root import react,from reac...

React 元件之間的通訊方式

在專案開發的過程中,隨著應用功能複雜度的增加和元件層次劃分的需求,元件之間的通訊越來越多,我大致認為元件之間的通訊分為3種 父 子元件通訊 子 父元件通訊和同級元件之間的通訊。這是最常見的通訊方式,父元件只需要將子元件需要的props傳給子元件,子元件直接通過this.props來使用。更多要提的是...

React兄弟元件之間的通訊

案例要求 達到這樣乙個效果 元件拆分 import react,from react import search from components search search import import list from components list list export default cla...