react 调用子（孙）组件方法

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

$(薛定谔的喵)

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

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react 调用子（孙）组件方法

本文链接：https://blog.youkuaiyun.com/Chad97/article/details/88413077

React 专栏收录该内容

23 篇文章

订阅专栏

在不使用Redux的情况下，本文详细介绍了如何在React中通过ref调用子组件和孙组件的方法。首先，通过在父组件上创建ref并将其传递给子组件，然后在子组件中返回this，使得父组件能够调用子组件的方法。进一步地，通过子组件传递，父组件也能间接调用孙组件的方法。当组件间的通信变得复杂时，推荐使用Redux等状态管理工具进行优化。Redux适用于用户操作复杂、多用户协作、大量服务器交互等情况。

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

react 调用子（孙）组件方法

在不是用redux的情况下，我们要使用子（孙）组件上的方法，或者属性

调用子组件

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>
        )
    }
	//定义一个拿子组件返回值this的函数
    onRef = (ref) => {
        this.child = ref
    }
	//调用处理函数
    click = (e) => {
        this.child.myName()
    }

}

class Child extends Component {
    componentDidMount(){
    	//通过pros接收父组件传来的方法
        this.props.onRef(this)
    }

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

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

步骤分析

在父组件this上先挂载一个child = ref 接收一个参数 ref 子组件传递过来的this
<Child onRef={this.onRef} /> 在子组件上用props传递这个函数
子组件接收这个函数返回自己的this，如：在生命周期中返回这个this

 componentDidMount(){
    	//通过pros接收父组件传来的方法
        this.props.onRef(this)
    }

调用孙组件

我们知道了子组件，那孙组件也就自然而然了，其实就是在子组件上在加一层拿子组件返回值this的函数:<Child onRef={this.onRef} />

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>
        )
    }
	//定义一个拿子组件返回值this的函数
    onRef = (ref) => {
        this.child = ref
    }
	//调用处理函数
    click = (e) => {
        this.child.childFn()
    }

}
-----------------------华丽的分割线-------------------------------
class Child extends Component {
    componentDidMount(){
    	//通过pros接收父组件传来的方法
        this.props.onRef(this)
    }
	onRef = (ref) => {
        this.child = ref
    }
    childFn = (e) => {
        this.child.myName()
        
    }

    render() {
        <Child2 onRef={this.onRef}>我是孙组件<Child2>
    }
}

--------------------华丽的分割线-------------------------------
class Child2 extends Component {
    componentDidMount(){
    	//通过pros接收父组件传来的方法
        this.props.onRef(this)
    }

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

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