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. 获取SD卡中的音乐文件

    小编近期在搞一个音乐播放器App.练练手: 首先遇到一个问题.怎么获取本地的音乐文件? /** * 获取SD卡中的音乐文件 * * @param context * @return */ public ...

  2. 【关键字】volatile

    volatile 修饰的关键字,确保编译器不对成员变量进行任何优化: private volatile double d; // No optimization

  3. Core Data的那点事儿~

    一.介绍下Core Data CoreData在早些年iOS开发中使用不多,因为其本身性能略低,以及不使用SQL语句而失去的灵活性,再加上FMDB之类封装SQLite的三方框架很好用,所以一直不受待见 ...

  4. php安全过滤类

    /*ansic码-Url码表: http://www.w3school.com.cn/tags/html_ref_urlencode.html ---------------------------- ...

  5. [Swift通天遁地]三、手势与图表-(12)创建复合图表:包含线性图表和柱形图表

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. Akka源码分析-Actor创建(续)

    在上一遍博客中,我们已经分析了actor创建的大致过程,但只是涉及到了Dipatcher/Mailbox/ActorCell/InternalActorRef等对象的创建,并没有介绍我们自定义的继承A ...

  7. Mac OS下配置 ADB环境变量

    前提已经安装了Android sdk. 步骤打开终端Terminal, 输入open -e ~/.bash_profile, 若之前没有该文件,会自动创建.添加内容 export PATH=${PAT ...

  8. Wannafly挑战赛19 A-队列Q

    题目描述 ZZT 创造了一个队列 Q.这个队列包含了 N 个元素,队列中的第 i 个元素用 Qi 表示.Q1 表示队头元素,QN 表示队尾元素.队列中的元素是 N 的一个全排列. ZZT 需要在这个队 ...

  9. 兼容浏览器 div固定浏览器窗口底部 浮动div

    css内容: <style type="text/css"> #ken_BB { padding-right:30px; text-align: center; col ...

  10. .net Jquery动态显示当前时间

    <span id="Timer"></span> <script type="text/javascript"> $(fun ...