import React from 'react'
import '../page1/header.css'
import { Table } from 'antd'
import Child from './child'//引入的子组件

export default class Header extends React.Component{
  constructor(){
  super()

  }

}

onRef = (ref) => {//react新版本处理方式
  this.child = ref
}
click = (e) => {
  this.child.myName()
}

render(){

  return (<div>

    <Child onRef={this.onRef} />

    <button onClick={this.click}>父组件调用子组件方法</button>

  </div>

  )

  }

//子组件

import React from 'react'

export default class Header extends React.Component{
  constructor(props){
    super(props)
  }

componentDidMount(){
  this.props.onRef(this)
}
myName = () => alert('父组件调用子组件方法成功')
render(){

return (
  <div className="header">
  </div>
)
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 【翻译自mos文章】rman 标准版和企业版的兼容性

    rman 标准版和企业版的兼容性 来源于: RMAN Standard and Enterprise Edition Compatibility (文档 ID 730193.1) 适用于: Oracl ...

  2. 【UI自动化方面】

    1.自动化执行失败如何排查故障. 答:1).查看log,错误原因.[log不详细的话,可以优化] 2).排查是否真的有bug,若不是bug查看是否是新版本引入了新的变更. 3).调试脚本看自己脚本是不 ...

  3. 解决myeclipse中struts2 bug问题包的替换问题

    由于struts2的bug问题,手工替换还是比較麻烦.但即便是最新的myeclipse2014也没有替换最新的struts2包,研究了一天,最终找到了解决的方法.下面就解决方法与大家分享一下. 1.在 ...

  4. P1402 酒店之王 网络流

    大水题,我自己瞎做就做出来了,没啥说的,zz建图,就是板子. 题干: 题目描述 XX酒店的老板想成为酒店之王,本着这种希望,第一步要将酒店变得人性化.由于很多来住店的旅客有自己喜好的房间色调.阳光等, ...

  5. bzoj3112

    http://www.lydsy.com/JudgeOnline/problem.php?id=3112 模板题...模板又打错了... #include<bits/stdc++.h> u ...

  6. STM32:SWD下载方式

    最近没事干做了个STM32小板子,芯片是STM32VBT6,下载方式用的SWD,比JTAG节省空间 我用了五根线,3.3V,GND,RESET,SWDIO,SWCLK, JTAG 接口pin map: ...

  7. Grunt环境搭建及使用

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  8. PCB genesis短槽加引导孔实现方法

    一.何为短槽 短槽通常定义:槽长小于2倍槽宽      如:槽长1.8mm,槽宽1.0mm 二.为什么要加短槽加引孔呢 短槽孔在钻孔时孔易偏斜导致槽长偏短, 当槽长宽比越小,则受力越不均匀,在钻第2个 ...

  9. A. Power Consumption Calculation

    http://codeforces.com/problemset/problem/10/A 题很简单,就是题意难懂啊... #include <stdio.h> #include < ...

  10. Hotel booking(spfa+floyd)

    http://acm.hdu.edu.cn/showproblem.php?pid=2992 题意:有n个城市,编号为(1~n),有一些城市中有一些旅店,要求从一个城市到另一个城市不能超过10小时,问 ...