快捷導(dǎo)航

react 兄弟組件如何調(diào)用對(duì)方的方法示例

更新時(shí)間：2018年10月23日 10:34:23 作者：僅此而已

這篇文章主要介紹了react 兄弟組件如何調(diào)用對(duì)方的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

最近有一個(gè)場(chǎng)景是Child2組件點(diǎn)擊讓Child1組件里面的state的值發(fā)生改變,Child1是一個(gè)公用組件，把里面的state值改為props傳遞，修改內(nèi)容太多，容易出錯(cuò)，就想找其他的方法來(lái)解決兄弟組件調(diào)用方法問題，下面看代碼:

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?最初的源碼解析
這篇文章主要介紹了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)畫、可自定義拖拽區(qū)域,文章通過代碼示例介紹的非常詳細(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ù)展示問題
今天在做項(xiàng)目的時(shí)候遇到幾個(gè)讓我很頭疼的問題，一個(gè)是通過后端接口成功訪問并又返回?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的那些事，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
React之防止按鈕多次點(diǎn)擊事件?重復(fù)提交
這篇文章主要介紹了React之防止按鈕多次點(diǎn)擊事件?重復(fù)提交問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
react?echarts?tree樹圖搜索展開功能示例詳解
這篇文章主要為大家介紹了react?echarts?tree樹圖搜索展開功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(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)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-09-09