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. spring装配集合

    前面我们已经了解了怎样使用spring装备简单的属性(使用value属性)和引用其它bean的属性(使用ref属性).可是value和ref仅在Bean的属性值是单个值的情况下才实用.当bean的属性 ...

  2. 从一个小demo开始,体验“API经济”的大魅力

    写在前面 “API经济”这个词是越来越火了,但是"API经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...

  3. Linux下一款可以使用命令行的pdf阅读器

    Zathura是linux下一款用命令行控制打pdf阅读器,并且基本打使用方法和vim很相似.对于喜欢键盘操作的用户来说的确是一个不错的选择. ubuntu下的安装命令: sudo apt-get i ...

  4. CentOS6.5下用Git克隆代码(https方式)

    一.首先最好保证GIT是最新版 查看GIT命令 $ git --version 有关git的安装,应该有好多文章介绍.注意更新之后,要重启系统,否则显示的版本号,还是老版本. 二.如果工作环境存在网络 ...

  5. 【Ubuntu】某灯图标过大

    发现某灯在桌面上图标过大,点击resize拖动没反应,遂查找原因 发现是它图标只有128x128的版本,所以显得比别的图标大 打开lantern.desktop(不知道.desktop请看https: ...

  6. Codeforces Round #142 (Div. 2)B. T-primes

    B. T-primes time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  7. extern_c

    (1)    使用extern和包含头文件来引用函数有什么区别呢?extern的引用方式比包含头文件要简洁得多!extern的使用方法是直截了当的,想引用哪个函数就用extern声明哪个函数.这大概是 ...

  8. 特征变化--->索引到标签的转换(IndexToString)

    package Spark_MLlib import org.apache.spark.ml.feature.{IndexToString, StringIndexer} import org.apa ...

  9. VPS主机

    腾讯云企业认证 备案域名要是顶级域名格式,所以不能是www.blueheartzf.com,而要是blueheartzf.com

  10. 9.10NOIP模拟题

      9.10 NOIP模拟赛 题目名称 区间 种类 风见幽香 题目类型 传统 传统 传统 可执行文件名 section kinds yuuka 输入文件名 section.in kinds.in yu ...