React父组件调用子组件的方法

有有有何不可

于 2021-09-30 14:49:16 发布

阅读量317

点赞数

分类专栏： React——学习记录文章标签： react.js

本文链接：https://blog.youkuaiyun.com/csdn0624/article/details/120566301

版权

React——学习记录专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了在React中如何实现父组件向子组件传递函数，以及子组件如何通过props回调父组件的方法，实现组件间的双向通信。通过实例代码解析了onRef的使用以及组件生命周期方法componentDidMount的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export default  class Parent extends React.Component {
render() {
        return(
            <div>
            //第一步：可以看作父向子传值的方式，
            //传一个函数过去（该函数的作用就是把某个值赋给this.child）
                <Child onRef={this.onRef} />
                <button onClick={this.click} >click</button>
            </div>
        )
    }
//该函数的作用就是把某个值赋给this.child
onRef=(ref)=>{
	this.child=ref
}
//父中调用子组件的方法
click=()=>{
	this.child.childCLick()
}

}

第二步：

class Child extends Component {
    componentDidMount(){
    	//通过props接收父组件传来的方法，并将自身this作为参数传入并执行。
    	//这样父组件中的this.child就代表这个子组件Child了。
        this.props.onRef(this)
    }

    myName = () => alert('子组件fn')

    render() {
        return ('ch')
    }
}