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. ViewPager + Handler 实现的图片自己主动轮播

    首先上图看效果 我也是在网上看各种大牛们做的效果,非常多都是自己定义重写了一些控件来实现这个效果的. 我把当中的一位大牛写的ViewPager的效果加上了Handler实现了自己主动轮播效果.在此做个 ...

  2. python练习-跳出多层循环和购物车

    跳出多层循环:三层循环,最里层直接跳出3层 在Python中,函数运行到return这一句就会停止,因此可以利用这一特性,将功能写成函数,终止多重循环 def work(): for i in ran ...

  3. 在Sql Server触发器中判断操作是Insert还是Update还是Delete

    在Sql Server触发器中判断操作是Insert还是Update还是Delete DECLARE    @IsInsert bit,    @IsUpdate bit,    @IsDelete  ...

  4. MarkMonitor 目前最安全的域名注册商,因此,世界500强网站中的22%域名托管于markmonitor公司

    也许你查询某个大型公司域名whios信息时,常常会发现很多这些大型公司的域名都在一家名为MarkMonitor的公司注册,那么markmonitor是家什么样的公司呢? MarkMonitor是一家从 ...

  5. hdoj--1205--吃糖果(规律)

     吃糖果 Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Sub ...

  6. Python猜年龄

    题目:Python实现猜年龄 步骤一:实现最简单的猜年龄 # 事先定义 dark_knight_age = 28 user_age = input('Please guess my age:') us ...

  7. shell脚本-循环选择语句

    shell脚本-循环选择语句 过程式编程语言: 顺序执行 选择执行 循环执行 注:条件中的变量,可以在执行语句中使用,不用在加上"$". if语句 根据命令的退出状态来执行命令 单 ...

  8. RijndaelManaged 加密

    public string Encrypt(string str) { string result = null; if (str == null) { return result; } try { ...

  9. PCB ODB++(Gerber)图形绘制实现方法

    这里讲解一下用net解析PCB图形绘制实现方法 一.解析PCB图形绘制实现 解析PCB图形,说简单也非常简单,先说一下,PCB Gerber图形由:点,线,弧,铜皮,文字 5类元素组成,通常简写为:P ...

  10. E20170617-hm

    notation   n. 记号,标记法; implicit   adj. 不言明[含蓄]的; 无疑问的,绝对的; 成为一部份的; 内含的; selector   n. 选择者,选择器; promot ...