日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

React兄弟组件之间通信

發(fā)布時(shí)間:2025/4/16 编程问答 39 豆豆
生活随笔 收集整理的這篇文章主要介紹了 React兄弟组件之间通信 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

兄弟組件之間通信

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ò),歡迎將生活随笔推薦給好友。