快捷導(dǎo)航

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)文章

詳解基于webpack搭建react運(yùn)行環(huán)境
本篇文章主要介紹了詳解基于webpack搭建react運(yùn)行環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
React實(shí)現(xiàn)路由返回?cái)r截的三種方式
最近項(xiàng)目為了避免用戶(hù)誤操作導(dǎo)致數(shù)據(jù)丟失,增加返回?cái)r截功能,但是之前由于qiankun的報(bào)錯(cuò)導(dǎo)致這個(gè)功能一直有一些問(wèn)題,所以專(zhuān)門(mén)獨(dú)立搞了一個(gè)專(zhuān)題研究在react中各種方式實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下
2024-05-05
基于Webpack5 Module Federation的業(yè)務(wù)解耦實(shí)踐示例
這篇文章主要為大家介紹了基于Webpack5 Module Federation的業(yè)務(wù)解耦實(shí)踐示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
ReactNative之FlatList的具體使用方法
本篇文章主要介紹了ReactNative之FlatList的具體使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理
這篇文章主要為大家介紹了react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
react合成事件與原生事件的相關(guān)理解
本文主要介紹了react合成事件與原生事件的相關(guān)概念，幫助大家區(qū)分這兩種事件，學(xué)習(xí)react的同學(xué)不妨了解下
2021-05-05
Taro?React自定義TabBar使用useContext解決底部選中異常
這篇文章主要為大家介紹了Taro?React底部自定義TabBar使用React?useContext解決底部選中異常(需要點(diǎn)兩次才能選中的問(wèn)題)示例詳解，有需要的朋友可以借鑒參考下
2023-08-08
如何不使用eject修改create-react-app的配置
許多剛開(kāi)始接觸create-react-app框架的同學(xué)，不免都會(huì)有個(gè)疑問(wèn)：如何在不執(zhí)行eject操作的同時(shí)，修改create-react-app的配置。
2021-04-04
使用react+redux實(shí)現(xiàn)彈出框案例
這篇文章主要為大家詳細(xì)介紹了使用react+redux實(shí)現(xiàn)彈出框案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
Vite搭建React項(xiàng)目的方法步驟
這篇文章主要介紹了Vite搭建React項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04