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

参考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. linux 下ftp的安装配置 图文教程

    0.安装ftp的前置条件是关掉SElinux # vi /etc/selinux/config 修改 SELINUX=” disabled ” ,重启服务器.若相同,则跳过此步骤. 1. 可先查看是否 ...

  2. Redis 的持久化与过期键

    简介 Redis 是使用非常广泛的 Key-Value 内存数据库.因为数据都存放在内存中,所以存取速度非常快.不过,很多情况下我们需要将 Redis 中的数据保存到硬盘中以便做备份.Redis 提供 ...

  3. <JAVA图像学习笔记>关于Graphics/Graphics2D以及简单的几何图像制作(一个简单钟表的实现)

    题外话:正好赶上OperatingSystem的作业要做一个模拟线程/进程调度的问题,决定用JAVA实现才发现这些内容和之前学过的GUI制作是两码事儿- -b 通过学习java.swing库的Acti ...

  4. vue-awesome-swiper的使用以及API整理

    一.先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4&q ...

  5. matlab保存txt文件

    save roadsurfacepointcloud.xyz -ascii roaddata2 %保存路面点云文件 roaddata2是变量.

  6. js面向(基于)对象编程-三大特征

    ①抽象 js提供以下几种控制方法和属性的访问权限: (1)公开级别:对外公开 (2)私有级别:类本身可以访问,不对外公开 案例如下所示: function Person(name,age,sal){ ...

  7. smack api 转载未测试

    ===============================================================主动发送信息给某个用户-------------------------- ...

  8. Linux_异常_04_ftp: command not found...

    今天在centos上使用ftp命令连接本机的FTP服务器(本机FTP服务使用Vsftpd搭建),出现如下的错误提示:-bash: ftp: command not found 查询相关资料,发现很有可 ...

  9. java-02 for循环,while循环

    ###############获取一个数字的每位数字############### #############1-100奇数和偶数和############## public class Sum { ...

  10. 1095 Cars on Campus (30)(30 分)

    Zhejiang University has 6 campuses and a lot of gates. From each gate we can collect the in/out time ...