兄弟組件之間通信

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

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

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

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

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的狀態更改，然后把state的狀態傳遞到Display中。下面我們來看看Button組件實現的功能：

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

我們將計數器的counter點擊放在了子組件Buttons組件中了。當子組件需要向父組件推送信息或觸發事件時，React通常采用回調函數來實現。這樣，當我們點擊按鈕時，觸發的不是Buttons里的內部函數，而是觸發props上傳來的函數。這是一個簡單的無狀態函數組件，其內部的onClick事件處理器會觸發props上的函數。這樣具體邏輯在父組件中，Buttons本身的邏輯就會變得很純粹。當被點擊時，他們只能通知自身擁有者。

因此，每當子組件需要向父組件推送數據或者通知父組件發生了什么事時，可以傳遞回調函數，同時將其余邏輯放在父組件中。

最后成Display組件：

import React from 'react'const Display = ({ counter }) => <h1>{counter}</h1>Display.propTypes = {counter: React.PropTypes.number, }export default Display

每當需要讓兩個沒有關聯的組件相互通信時，都需要找到它們的公有父組件來保存狀態。這樣，每當狀態更新時，兩個組件都能從props接收新數據。

總結

以上是生活随笔為你收集整理的React兄弟组件之间通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。