react:在一个组件中调用别的组件中的方法

先介绍一下要解决的问题:react中一个组件A和一个组件B,其中B是被connect(connect是redux中的方法)包装过的组件,包装成BContainer,A和BContainer的关系是兄弟关系,在同一个父元素下渲染。现在我们要在点击A的时候调用B中的方法

解决思路:主要是用到ref获取BContainer组件挂载之后的实例

render(){
    var b = null
    return(<BContainer ref={(node) => b = node}/>)
}

ref中的回调函数会在组件被挂载之后执行,参数是组件的实例,所以这个时候变量b就是被挂载的组件B的实例。

这个实例对象是connect包装过后的方法,我们可以用

b.getWrappedInstance()

来获取到被包装的组件,但是注意记得在connect函数那里要加上参数{ withRef:true }才行

export default connect(
    mapStateToProps,
    mapDispatchToProps,
    null,
    { withRef: true }
)(B)

这样就可以获得B的实例了,就可以调用B中的方法了

还有要注意的,在B中定义方法时要这样定义

fun = ()=>{
}

这样相当于this.fun = ()=>{},如果你像成员函数(比如constructor)那样定义:fun(){}它是会绑定在对象的原型(_proto_)上,因为constructor也是在原型上的



原文地址:https://www.cnblogs.com/maskmtj/p/9380064.html

时间: 2024-10-13 17:34:31

react:在一个组件中调用别的组件中的方法的相关文章

[转]C# 互操作性入门系列(四):在C# 中调用COM组件

传送门 C#互操作系列文章: C#互操作性入门系列(一):C#中互操作性介绍 C#互操作性入门系列(二):使用平台调用调用Win32 函数 C# 互操作性入门系列(三):平台调用中的数据封送处理 C#互操作性入门系列(四):在C# 中调用COM组件 本专题概要: 引言 如何在C#中调用COM组件--访问Office 互操作对象 在C# 中调用COM组件的实现原理剖析 错误处理 小结 一.引言 COM(Component Object Modele,组件对象模型)是微软以前推崇的一个开发技术,所以

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

Shell脚本中调用另外一个脚本的方法

在Linux平台上开发,经常会在console(控制台)上执行另外一个脚本文件,经常用的方法有:./my.sh 或 source my.sh 或 . my.sh:这三种方法有什么不同呢?我们先来了解一下在一个shell脚本中如何调用另外一个shell脚本,其方法有 fork    exec    source. 1.fork  ( /directory/script.sh) : 如果shell中包含执行命令,那么子命令并不影响父级的命令,在子命令执行完后再执行父级命令.子级的环境变量不会影响到父

Native Application 开发详解(直接在程序中调用 ntdll.dll 中的 Native API,有内存小、速度快、安全、API丰富等8大优点)

文章目录:                   1. 引子: 2. Native Application Demo 展示: 3. Native Application 简介: 4. Native Application 有何妙用: 5. MJ0011 关于 Native Application 的文章整理: 6. 互联网上其他关于 Native Application 的文章整理: 7. 小结: 1. 引子: 其实在好久以前就看了 MJ0011 翻译的那个<Native 应用程序详细>系列的文

Js文件中调用其它Js函数的方法

Js文件中调用其它Js函数的方法 在项目开发过程中,也许你会遇这样的情况.在某一Js文件中需要完成某一功能,但这一功能的大部分代码在另外一个Js文件中已经完成了,自己只需要调用这个方法再加上几句代码就可以实现所需的功能.我们知道,在html中,利用<script language="javascript" type="text/javascript" src="../script.js"></script>引入的两个js是

a 中调用js的几种方法

我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行javascript语句 2. a href="javascript:void(0);"

在finally中调用一个需要await的方法

最近在把code改写成async+await的形式,发现有些情况下需要在finally中需要调用异步方法,但是编译器不允许在cache和finally中出现await关键字...但是用Wait()或者Result又会导致一些其他稀奇古怪的毛病(死锁啦,AggregateException啦...) 所以,需要找一个类似于finally的效果,并且允许使用async..await的方式,想了一下,其实这不就是ContinueWith么! 对没有返回值的try..finally可以用下面的方法: p

[转]vc中调用其他应用程序的方法(函数) winexec,shellexecute ,createprocess

三个SDK函数: WinExec,ShellExecute ,CreateProcess可以实现调用其他程序的要求,其中以WinExec最为简单,ShellExecute比WinExec灵活一些,CreateProcess最为复杂.    WinExec 两个参数,前一个指定路径,后一个指定显示方式.    ShellExecute 可以指定工作目录,并且还可以寻找文件的关联直接打开不用加载与文件关联的应用程序,ShellExecute还可以打开网页,启动相应的邮件关联发送邮件等等.    Cr

Titanium中调用ios组件时语言不是本地化的解决方法

用Titanium开发的ios应用中,当调用系统组件时,尽管手机已经设置了系统语言为中文,但那些组件的界面却仍为英文.比如调用iphone中的相册组件,其界面为: 那么怎么让它跟系统语言保持一致呢? 在原生的ios开发中,只需要在info.plist中把 CFBundleAllowMixedLocalizations 设置为 true 就行了,代表Localized resources can be mixed,就是允许库使用本地语言资源. 那么在Titanium中该怎么做呢? 其实也很简单,T