把子组件的参数回传到父组件中,并且赋值给子组件的一个实例方法.

参考React中文网: http://www.css88.com/react/docs/refs-and-the-dom.html

import React, {Component} from 'react';

export default class Parent extends Component {
render() {
return(
<div>
<Child onRef={this.onRef} />
<button onClick={this.click} >click</button>
</div>
)
} onRef = (ref) => {
this.child = ref
} click = (e) => {
this.child.myName()
} } class Child extends Component {
componentDidMount(){        //必须在这里声明,所以 ref 回调可以引用它
this.props.onRef(this)
} myName = () => alert('我的名字') render() {
return ('lalalala')
}
}

react父组件调用子组件方法的更多相关文章

  1. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

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

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

  3. react中直接调用子组件的方法(非props方式)

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

  4. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

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

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

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

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

  7. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  8. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  9. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

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

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

随机推荐

  1. rocketmq安装

    1 安装Rocketmq https://my.oschina.net/daijunjian/blog/732560 2 可视化管理控台 http://blog.csdn.net/jayjjb/art ...

  2. P3715 [BJOI2017]魔法咒语

    P3715 [BJOI2017]魔法咒语 用基本词汇组成\(L\)长度的单词,其中不能包含禁忌词汇 用禁忌词汇建强大的\(tire\)图 解决: 分类讨论,\(L<=100\)用普通dp暴力在\ ...

  3. jmeter-sampler(取样器)HTTP请求

    名称:用于标识一个sample. 注释:对于测试没任何影响,仅用来记录用户可读的注释信息. 服务名称或IP:http请求发送的目标服务器名称或者IP地址,比如:http://www.baidu.com ...

  4. leetcode 307. Range Sum Query - Mutable(树状数组)

    Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...

  5. T(n) = 25T(n/5)+n^2的时间复杂度

    对于T(n) = a*T(n/b)+c*n^k;T(1) = c 这样的递归关系,有这样的结论: if (a > b^k)   T(n) = O(n^(logb(a)));logb(a)b为底a ...

  6. Hive操作笔记

    hive库清表,删除数据 insert overwrite table lorry.bigdata select * from lorry.bigdata where 1=0 hive的simple模 ...

  7. 百度地图API的第一次接触——标注和信息窗的使用

    1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMa ...

  8. 利用正则表达式类解析SQL语句,达到Worklist兼容各个RIS数据库的目的

    在做RIS的项目中遇到一个问题, 因为Worklist要兼容各个RIS数据库, 因此设计了目前这个架构. 1.xml文件来配置RIS数据库的数据源, 2.xml文件来存储关于查询/更新数据库的SQL语 ...

  9. Hadoop——hive安装

    安装前先确保安装好MySQL,具体见hadoop_MySQL安装 1.下载hive(下载前先去spark官网看下sparkSQL支持到哪个版本的hive,本文hive版本为1.2.1) 2.解压到/u ...

  10. 最小化安装linux CentOS-6.6后 部署fastdfs +下载地址 很干很干的干货

    参考:http://blog.itpub.net/7734666/viewspace-1292485/ 安装一些必要软件 yum -y install wget gcc perl mkdir ~/zy ...