react 调用子（孙）组件方法

最新推荐文章于 2024-06-11 18:35:11 发布

$(薛定谔的喵)

最新推荐文章于 2024-06-11 18:35:11 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/Chad97/article/details/88413077

版权

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

摘要由CSDN通过智能技术生成

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