兄弟組件之間通信

React是只有單項數(shù)據(jù)流動模式，也就是只能父組件的數(shù)據(jù)傳遞給子組件，而沒有辦法將子組件的數(shù)據(jù)傳遞給父組件。那么如果想要兩個子兄弟組件通信該怎么辦呢？

答案是可以通過子組件向父組件推送信息或者觸發(fā)事件，然后父組件的狀態(tài)會發(fā)生更新。傳遞到子組件的數(shù)據(jù)也會發(fā)生更改。這樣兩個兄弟組件就可以通過公有父組件實現(xiàn)通信。

讓我們來去舉一個具體例子，我們有一個counter組件來實現(xiàn)計數(shù)功能，樣式大致是這樣的：

公有父組件可以寫成這樣：

import React from 'react' import Display from './display' import Buttons from './buttons'class Counter extends React.Component {constructor(props) {super(props)this.state = {counter: 0,}this.handleIncrement = this.handleIncrement.bind(this)this.handleDecrement = this.handleDecrement.bind(this)}handleIncrement() {this.setState({counter: this.state.counter + 1,})}handleDecrement() {this.setState({counter: this.state.counter - 1,})}render() {return (<div><Display counter={this.state.counter} /><ButtonsonDecrement={this.handleDecrement}onIncrement={this.handleIncrement}/></div>)}}export default Counter

可以看到這個公共父組件的功能是控制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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。