react 兄弟组件如何调用对方的方法示例

最近有一个场景是Child2组件点击让Child1组件里面的state的值发生改变,Child1是一个公用组件，把里面的state值改为props传递，修改内容太多，容易出错，就想找其他的方法来解决兄弟组件调用方法问题，下面看代码:

Child1 是第一个子组件

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>
  );
 }
}

是第二个子组件，和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组件触发一个事件的时候，就可以直接这样调用this.child1.onChange(),Child1组件里面就会直接调用onChange函数,修改text为Child1 onChange;

到这里就可以实现调用兄弟组件，其实还是用父组件做了中间传递。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ReactNative-JS 调用原生方法实例代码

    ReactNative-JS 调用原生方法实例代码

    第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule package com.mixture; import android.content.Context; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule

  • react 兄弟组件如何调用对方的方法示例

    最近有一个场景是Child2组件点击让Child1组件里面的state的值发生改变,Child1是一个公用组件,把里面的state值改为props传递,修改内容太多,容易出错,就想找其他的方法来解决兄弟组件调用方法问题,下面看代码: Child1 是第一个子组件 class Child1 extends React.Component { constructor(props) { super(props); this.state = { text:'Child1' }; } onChange=(

  • vue 兄弟组件的信息传递的方法实例详解

    前言 兄弟组件的信息传递有三种方式: 1.vuex 传递. 会将信息公有化. 此方法可在所有组件间传递数据. 2.建立Vue 实例模块传递数据. Vue 实例模块会成为共用的事件触发器. 其通过事件传递的信息不回被公有化. 3.建立事件链传递数据. 一个兄弟组件通过事件将信息传给兄弟组件共有的父组件. 父组件再将信息通过属性传递给另一个兄弟组件. 若兄弟组件不是亲兄弟,而是堂兄弟,也就是他们有一个共同的爷爷,那么此方法会使程序变得繁琐. 一,vuex 传递数据 1.安装vuex npm inst

  • react获取input输入框的值的方法示例

    react 获取input 输入框的值的多种方式 第一种方式 非受控组件获取 第二种方式 受控组件获取 非受控组件获取 ref import React , {Component} from 'react'; export default class App extends Component{ search(){ const inpVal = this.input.value; console.log(inpVal); } render(){ return( <div> <input

  • angular组件间通讯的实现方法示例

    前言 一个Angular应用一般情况下包含多个组件,而且要让组件互相之间能进行通讯(数据传送),这样才能构成一个有机的完整系统. 1.情景引入 下面例举一个实际遇到的情况: 上图页面包含两个组件,"新增班级组件"和"选择教师组件",在新增班级时需要选择改班级的管理教师,管理教师列表要从数据库中获取.选择好教师后,"选择教师组件"要把选择的教师对象传递回"新增班级组件",这其中涉及到对象传递称为通讯. 2.组件关系 组件之间有几

  • Android开发调用WebService的方法示例

    本文实例讲述了Android开发调用WebService的方法.分享给大家供大家参考,具体如下: WebService是一种基于SOAP协议的远程调用标准,通过webservice可以将不同操作系统平台.不同语言.不同技术整合到一块.在Android SDK中并没有提供调用WebService的库,因此,需要使用第三方的SDK来调用WebService.PC版本的WEbservice客户端库非常丰富,例如Axis2,CXF等,但这些开发包对于Android系统过于庞大,也未必很容易移植到Andr

  • vue中各组件之间传递数据的方法示例

    vue中各组件之间传递数据的方法示例

    前言 本文主要给大家介绍了关于vue组件之间传递数据的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 作用域 在vue中,组件实例的作用域是孤立的,父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据. 下面几种方法可以实现组件之间数据的传递. 一.通过prop传递数据 1)在子组件中,使用prop属性,显示的表明,它所需要的数据. 2)在父组件中,需要引用子组件的地方,传入数据.

  • Python中用字符串调用函数或方法示例代码

    前言 本文主要给大家介绍了关于Python用字符串调用函数或方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 先看一个例子: >>> def foo(): print "foo" >>> def bar(): print "bar" >>> func_list = ["foo","bar"] >>> for func in func_li

  • React父子组件间的传值的方法

    React父子组件间的传值的方法

    父组件向子组件传值: 父组件: import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ th

  • React Native中TabBarIOS的简单使用方法示例

    React Native中TabBarIOS的简单使用方法示例

    前言 大家应该都知道,TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法,话不多说了,来一起看看详细的介绍吧. 首先看一下效果图,如下图所示: 效果图 看完效果图再对代码进行说明. import React, { Component } from 'react'; import { StyleSheet, View, TabBarIOS, NavigatorIOS, Navigator, AppRegistry, Image, Toucha

  • vue.js父组件使用外部对象的方法示例

    最近在碰到有同学问我,vue父组件怎么使用外部对象,具体例子如下: 有组件a: <div @click="onClick">component a</div> // componet a ... methods: { onClick(evt) { // doSomething 这里只能拿到 mouseEvent this.outsideClickHandler(evt); // 调用外部处理函数 } } ... 有组件B,引用组件a,并传入outsideClic

随机推荐