前端踩坑(六)--------------------------react父组件调用子组件方法

最新推荐文章于 2025-06-13 17:18:58 发布

小李科技

最新推荐文章于 2025-06-13 17:18:58 发布

阅读量626

点赞数

前端踩坑专栏收录该内容

10 篇文章

订阅专栏

博客介绍了React父组件调用子组件方法，此前已讲过父子组件通过props传递数据，该方法与之类似。通过代码展示，点击按钮可弹出子组件输出，即把参数回传到父组件并赋值给子组件实例方法，还提及在父组件统一调用子组件方法的场景。

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

react父组件调用子组件方法

前期我们说了父子组件互相通过props传递数据的方法,这个应该都可以理解.
其实今天说的这个父组件直接调用子组件方法, 也类似.
先看代码,比较直观.

import React, {Component} from 'react';

export default class Parent extends Component {
    render() {
        return(
            <div>
                <Child onRef={this.onRef} />
                <button onClick={this.click} >click</button>
            </div>
        )
    }

    onRef = (ref) => {
        this.child = ref
    }

    click = (e) => {
        this.child.myName()
    }

}

class Child extends Component {
    componentDidMount(){
        this.props.onRef(this)
    }

    myName = () => alert('xiaohesong')

    render() {
        return ('woqu')
    }
}