React 父组件调用子组件方法

年轻的老六

于 2018-11-13 11:32:53 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript React Web 文章标签： React JavaScript Web ES6

本文链接：https://blog.youkuaiyun.com/WCBandCTZ/article/details/84026166

版权

JavaScript 同时被 3 个专栏收录

18 篇文章

订阅专栏

Web

14 篇文章

订阅专栏

React

7 篇文章

订阅专栏

本文介绍在React中如何实现在父组件中调用子组件的方法，通过自定义ref和回调函数实现跨组件通信，适用于未使用Redux或Mobx的状态管理场景。

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

react中我们都知道组件间的通信几乎都是通过props或者回调函数形式进行传递（子组件调用获取父组件），但是实际开发中会因为组件划分或者业务需求，不得不在父组件中调用子组件的方法（操作父组件来调用子组件的方法，来改变子组件的state)。

import react, {Component} from 'react';

class Parent extends Component {
    
    onRef = (e) => {
        this.child = e;//将子组件this赋值给父组件的child
    }
    
    parentFunction = () => {
        this.child.childFunction();//父组件调用子组件方法
    }
    
    render (){
        return(
           <div>
           <Child onRef={this.onRef}/>//自定义子组件属性传递给子组件
           <button onClick={()=>this.parentFunction()}/>
           </div>
        )
    }
}

import react ,{Component} from 'react';

class Child extends Compontnt {
    
    childFunction = () => {
        alert('success!');
    }
    
    componentDidMount(){
        //判断逻辑等等
        this.props.onRef(this);//将子组件的this传给父组件中<Child/>定义的的onRef的onRef方法；
    }
}

项目中未集成Redux或Mobx可用以上方法在父组件中调用子组件方法，下篇会讲解reacr16.3中新增createRef()