react 父子组件之间的方法调用

父子组件之间传值通过props、触发事件调用props的方法对父组件的state进行修改;

父组件


子组件

类似于vue中子组件通过props接受父组件传值,若要修改父组件值则emit事件进行修改。

父子组件之间的方法调用也是相同,要点就是将子组件的实例暴露出来给父组件,这样父组件才能调用子组件中方法:

一种针对单个DOM上操作方法的,可以暴露出该DOM的ref,下图两种都ok

函数组件将button这个DOM传出
类组件将button DOM传出

另一种就是由于函数组件的this不是它的实例而是undefined,但类组件this指本身实例,因此我们可以在能够获取props值时的生命周期中将this暴露给父组件,这样父组件能够调用该组件内定义的所有方法。


类组件将整个类组件实例传出
父组件接收ref值,此时的button根据情况结果不同,这样通过this.button.XX调用子组件方法
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,526评论 1 33
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 25,915评论 1 12
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,058评论 0 1
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,499评论 1 10
  • 我要那稳稳的幸福 能抵挡末日的残酷 在不安的深夜 能有个归宿 我讨厌那无边的黑幕 连那星星和月亮都被征服 夜色中一...
    幻梦邪魂阅读 417评论 0 3