react 兄弟組件如何調(diào)用對(duì)方的方法示例
更新時(shí)間：2018年10月23日 10:34:23 作者：僅此而已
這篇文章主要介紹了react 兄弟組件如何調(diào)用對(duì)方的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
最近有一個(gè)場(chǎng)景是Child2組件點(diǎn)擊讓Child1組件里面的state的值發(fā)生改變,Child1是一個(gè)公用組件，把里面的state值改為props傳遞，修改內(nèi)容太多，容易出錯(cuò)，就想找其他的方法來(lái)解決兄弟組件調(diào)用方法問(wèn)題，下面看代碼:
Child1 是第一個(gè)子組件
class Child1 extends React.Component {
constructor(props) {
super(props);
this.state = {
text:'Child1'
};
}
onChange=()=>{
this.setState({
text:'Child1 onChange'
})
}
componentDidMount(){
this.props.onRef&&this.props.onRef(this)
}
render() {
return (
<div>{this.state.text}</div>
);
}
}
是第二個(gè)子組件，和Child1是兄弟組件;
class Child2 extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div onClick={this.props.onClick}>Child2</div>
);
}
}
home 父組件
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
onRef=(ref)=>{
this.child1=ref;
}
render() {
return (
<div className="home">
<Child1 onRef={this.onRef}/>
<Child2 onClick={
()=>{
this.child1.onChange&&this.child1.onChange()
}
} />
</div>
);
}
}
分析
- 第一步：在Child1組件的componentDidMount生命周期里面加上this.props.onRef(this),把Child1都傳遞給父組件，
- 第二步父組件里面 <Child1 onRef={this.onRef}/> this.onRef方法為onRef=(ref)=>{this.child1=ref;};
- 第三步 Child2組件觸發(fā)一個(gè)事件的時(shí)候，就可以直接這樣調(diào)用this.child1.onChange(),Child1組件里面就會(huì)直接調(diào)用onChange函數(shù),修改text為Child1 onChange;
到這里就可以實(shí)現(xiàn)調(diào)用兄弟組件，其實(shí)還是用父組件做了中間傳遞。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React調(diào)度系統(tǒng)Scheduler工作原理詳解
這篇文章主要為大家介紹了React調(diào)度系統(tǒng)Scheduler工作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了vscode調(diào)試react?最初的源碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2023-11-11
React實(shí)現(xiàn)一個(gè)拖拽排序組件的示例代碼
這篇文章主要給大家介紹了React實(shí)現(xiàn)一個(gè)拖拽排序組件?-?支持多行多列、支持TypeScript、支持Flip動(dòng)畫(huà)、可自定義拖拽區(qū)域,文章通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
react?express實(shí)現(xiàn)webssh?demo解析
這篇文章主要為大家介紹了詳解react?express實(shí)現(xiàn)webssh?demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
聊聊ant?design?charts?獲取后端接口數(shù)據(jù)展示問(wèn)題
今天在做項(xiàng)目的時(shí)候遇到幾個(gè)讓我很頭疼的問(wèn)題，一個(gè)是通過(guò)后端接口成功訪問(wèn)并又返回?cái)?shù)據(jù)，但拿不到數(shù)據(jù)值。其二是直接修改state中的data，console中數(shù)組發(fā)生變化但任然數(shù)據(jù)未顯示，這篇文章主要介紹了ant?design?charts?獲取后端接口數(shù)據(jù)展示,需要的朋友可以參考下2022-05-05
ReactNative頁(yè)面跳轉(zhuǎn)實(shí)例代碼
這篇文章主要介紹了ReactNative頁(yè)面跳轉(zhuǎn)的代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
淺談React Router關(guān)于history的那些事
這篇文章主要介紹了淺談React Router關(guān)于history的那些事，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React之防止按鈕多次點(diǎn)擊事件?重復(fù)提交
這篇文章主要介紹了React之防止按鈕多次點(diǎn)擊事件?重復(fù)提交問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
react?echarts?tree樹(shù)圖搜索展開(kāi)功能示例詳解
這篇文章主要為大家介紹了react?echarts?tree樹(shù)圖搜索展開(kāi)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
react高階組件經(jīng)典應(yīng)用之權(quán)限控制詳解
在React中,高階組件是重用組件邏輯的一項(xiàng)高級(jí)技術(shù)。下面這篇文章主要給大家介紹了關(guān)于react高階組件經(jīng)典應(yīng)用之權(quán)限控制的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09