React父组件调用子组件方法

最新推荐文章于 2024-08-27 16:39:52 发布

柴狗狗

最新推荐文章于 2024-08-27 16:39:52 发布

阅读量621

点赞数 1

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/heartsdance/article/details/119737383

版权

React 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

import React, {Component} from 'react';

export default class Parent extends Component {
    onRef = ref => {
        this.childRef = ref
    }

    click = () => {
        this.childRef.sayHello()
    }
    
    render() {
        return (
            <div>
                <Child onRef={this.onRef} />
                <button onClick={this.click}>click</button>
            </div>
        )
    }
}

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

    sayHello = () => alert('Hello')

    render() {
        return 'Hello'
    }
}