兄弟組件之間通信

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

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

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

公有父組件可以寫(xiě)成這樣：

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

可以看到這個(gè)公共父組件的功能是控制state的狀態(tài)更改，然后把state的狀態(tài)傳遞到Display中。下面我們來(lái)看看Button組件實(shí)現(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

我們將計(jì)數(shù)器的counter點(diǎn)擊放在了子組件Buttons組件中了。當(dāng)子組件需要向父組件推送信息或觸發(fā)事件時(shí)，React通常采用回調(diào)函數(shù)來(lái)實(shí)現(xiàn)。這樣，當(dāng)我們點(diǎn)擊按鈕時(shí)，觸發(fā)的不是Buttons里的內(nèi)部函數(shù)，而是觸發(fā)props上傳來(lái)的函數(shù)。這是一個(gè)簡(jiǎn)單的無(wú)狀態(tài)函數(shù)組件，其內(nèi)部的onClick事件處理器會(huì)觸發(fā)props上的函數(shù)。這樣具體邏輯在父組件中，Buttons本身的邏輯就會(huì)變得很純粹。當(dāng)被點(diǎn)擊時(shí)，他們只能通知自身?yè)碛姓摺?/p>

因此，每當(dāng)子組件需要向父組件推送數(shù)據(jù)或者通知父組件發(fā)生了什么事時(shí)，可以傳遞回調(diào)函數(shù)，同時(shí)將其余邏輯放在父組件中。

最后成Display組件：

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

每當(dāng)需要讓兩個(gè)沒(méi)有關(guān)聯(lián)的組件相互通信時(shí)，都需要找到它們的公有父組件來(lái)保存狀態(tài)。這樣，每當(dāng)狀態(tài)更新時(shí)，兩個(gè)組件都能從props接收新數(shù)據(jù)。

總結(jié)

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

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