我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的。

显而易见,这个执行是需要去主动触发的。

那有没有一种方式,方法在子组件定义好,可以直接在父组件去调用呢?

答案是必然的。

上代码^ - ^

import React, {Component} from "react";
import { Button } from "antd"; //父组件
export default class Parent extends Component {
render() {
return(
<div>
          <p>这是父组件</p>
<Child triggerRef={this.bindRef} />
<Button type="primary" onClick={this.btnClick} >click</Button>
</div>
)
} bindRef = ref => { this.child = ref } btnClick = () => {
this.child.getValuefromChild()
} }
//子组件
class Child extends Component {
componentDidMount(){
this.props.triggerRef(this)
}
  //这是子组件的方法
getValuefromChild = () => console.log("this is child value.") render() {
return <div>这是子组件</div>
}
}

是不是瞬间就风清月朗了~~

react中直接调用子组件的方法(非props方式)的更多相关文章

  1. vue父组件中调用子组件的方法

    Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...

  2. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  3. vue中父组件调用子组件的方法

    原文地址 文章目录 什么是组件? 使用组件 组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自 ...

  4. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

  5. Vue父组件调用子组件的方法

    vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如: 父组件: <template> <div @click ...

  6. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  7. Vue 父组件调用子组件的方法

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  8. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

  9. Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法

    <app-header #header></app-header> <div #myBox> 我是一个dom节点 </div> <button ( ...

随机推荐

  1. 论文笔记之 SST: Single-Stream Temporal Action Proposals

    SST: Single-Stream Temporal Action Proposals 2017-06-11 14:28:00 本文提出一种 时间维度上的 proposal 方法,进行行为的识别.本 ...

  2. (zhuan) awesome-object-proposals

      awesome-object-proposals  A curated list of object proposals resources for object detection. This ...

  3. [ECharts] - ECharts使用中国地图

    格式1: https://www.cnblogs.com/luna666/p/9007263.html  (非官方) <!DOCTYPE html> <html lang=" ...

  4. Jenkins-Publish HTML reports

    创建job:testreport 在job中添加: 在Jenkins服务器上: 创建目录: .jenkins/jobs/{job名称}/workspace/htmlreports    注:此处job ...

  5. 蚂蚁金服 Service Mesh 渐进式迁移方案|Service Mesh Meetup 实录

    小蚂蚁说: 本文是基于在 Service Mesher Meetup 上海站的主题分享<蚂蚁金服 Service Mesh 渐进式迁移方案>内容整理,完整的分享 PPT 获取方式见文章底部 ...

  6. XML.libXml2_ZC

    1.字符串比较函数: xmlStrcmp(...) 这是大小写敏感的比较 xmlStrcasecmp(...) 这是大小写不敏感的比较(忽略字符串里面字符的大小写) 2.查找节点 2.1.循环 2.2 ...

  7. VC.【转】窗口置于前台并激活的方法

    1.VC 窗口置于前台并激活的方法 - CSDN博客.html https://blog.csdn.net/oXunFeng/article/details/52681279 2.(http://ww ...

  8. IPC 之 Binder 初识

    概述 最近在看Android 的 IPC 机制,想要系统的研究一下,然后就走到了 Binder 这里,发现这个东西真是复杂,查看了一下些文章想要记录下.想要自己写但是发现一篇文章已经写的非常好了,就转 ...

  9. 力扣(LeetCode)58. 最后一个单词的长度

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...

  10. 力扣(LeetCode)965. 单值二叉树

    如果二叉树每个节点都具有相同的值,那么该二叉树就是单值二叉树. 只有给定的树是单值二叉树时,才返回 true:否则返回 false. 思路 递归 java版 /** * Definition for ...