react 子组件调用父组件中的方法

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

置顶雨夜浅痕

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

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/yuyeqianhen/article/details/104674547

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在React中实现父组件调用子组件方法的技巧，通过props传递函数，子组件触发按钮事件调用父组件的MakeMoney方法，展示了组件间通信的基本原理。

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

父组件

import React,{Component} from 'react';
import SonClick from './SonCllick/SonClick';
class ParentClick extends Component{
    MakeMoney(){
        alert("我在挣钱!");
    }
    render(){
        return(
            <div>
             
                <div>
                    <SonClick ref="child" onRef={this.onRef} MakeMoney={this.MakeMoney}></SonClick>
                </div>
            </div>
        )
    }
}

export default ParentClick;


子组件

import React,{Component} from 'react';

class SonClick extends Component{
    StudyMakeMoney=()=>{ // 学习挣钱，调用父组件方法
       this.props.MakeMoney();
   }
    render(){
        return(
            <div>
                我是子组件
       
                <div>
                    <button onClick={this.StudyMakeMoney}>调用父组件中的方法</button>
                </div>
            </div>
        )
    }
}

export default SonClick;

详情https://www.cnblogs.com/boonook/p/9598682.html