react 父组件调用子组件方法

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>

)

}

}