React兄弟组件之间通信
兄弟組件之間通信
React是只有單項數(shù)據(jù)流動模式,也就是只能父組件的數(shù)據(jù)傳遞給子組件,而沒有辦法將子組件的數(shù)據(jù)傳遞給父組件。那么如果想要兩個子兄弟組件通信該怎么辦呢?
答案是可以通過子組件向父組件推送信息或者觸發(fā)事件,然后父組件的狀態(tài)會發(fā)生更新。傳遞到子組件的數(shù)據(jù)也會發(fā)生更改。這樣兩個兄弟組件就可以通過公有父組件實現(xiàn)通信。
讓我們來去舉一個具體例子,我們有一個counter組件來實現(xiàn)計數(shù)功能,樣式大致是這樣的:
公有父組件可以寫成這樣:
可以看到這個公共父組件的功能是控制state的狀態(tài)更改,然后把state的狀態(tài)傳遞到Display中。下面我們來看看Button組件實現(xiàn)的功能:
import React from 'react'const Buttons = ({ onDecrement, onIncrement }) => (<div><button onClick={onDecrement}>-</button><button onClick={onIncrement}>+</button></div> )Buttons.propTypes = {onDecrement: React.PropTypes.func,onIncrement: React.PropTypes.func, }export default Buttons我們將計數(shù)器的counter點擊放在了子組件Buttons組件中了。當(dāng)子組件需要向父組件推送信息或觸發(fā)事件時,React通常采用回調(diào)函數(shù)來實現(xiàn)。這樣,當(dāng)我們點擊按鈕時,觸發(fā)的不是Buttons里的內(nèi)部函數(shù),而是觸發(fā)props上傳來的函數(shù)。這是一個簡單的無狀態(tài)函數(shù)組件,其內(nèi)部的onClick事件處理器會觸發(fā)props上的函數(shù)。這樣具體邏輯在父組件中,Buttons本身的邏輯就會變得很純粹。當(dāng)被點擊時,他們只能通知自身擁有者。
因此,每當(dāng)子組件需要向父組件推送數(shù)據(jù)或者通知父組件發(fā)生了什么事時,可以傳遞回調(diào)函數(shù),同時將其余邏輯放在父組件中。
最后成Display組件:
import React from 'react'const Display = ({ counter }) => <h1>{counter}</h1>Display.propTypes = {counter: React.PropTypes.number, }export default Display每當(dāng)需要讓兩個沒有關(guān)聯(lián)的組件相互通信時,都需要找到它們的公有父組件來保存狀態(tài)。這樣,每當(dāng)狀態(tài)更新時,兩個組件都能從props接收新數(shù)據(jù)。
總結(jié)
以上是生活随笔為你收集整理的React兄弟组件之间通信的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: css根据文字长度实现宽度自适应
- 下一篇: React简单表单最佳实践