react 父組件調用子組件方法
阿新 • • 發佈：2019-04-25
class 組件 head table 新版本 reac ops const rop
componentDidMount(){
this.props.onRef(this)
}
myName = () => alert(‘父組件調用子組件方法成功‘)
render(){
return (
<div className="header">
</div>
)
}
}
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 父組件調用子組件方法