React 子组件调用父组件方法

一、基本介绍

React 是一个非常流行的 JavaScript 库，用于构建用户界面。React 的主要思想是组件化，允许将 UI 拆分为独立的、可复用的部分。React 组件有状态和无状态两种，类组件和函数组件。类组件比函数组件更强大，可以使用生命周期方法，可以使用状态等功能。

在 React 中，组件之间的通信常用两种方式：父子组件通信和兄弟组件通信。而在父子组件通信的场景中，有时子组件需要调用父组件的方法来处理一些事情。这里我们将针对这种情况，详细介绍如何实现 React 子组件调用父组件方法。

二、在子组件中调用父组件方法

在 React 中，子组件通过 props 接收父组件传递的方法，并在需要时调用该方法。这种方式称为“回调函数”，因为父组件传递的方法在子组件需要时被调用，并回传参数。

下面我们通过一个例子来演示如何在子组件中调用父组件的方法。

// 父组件
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  handleMethod = () => {
    console.log('Hello from Parent!');
  }

  render() {
    return (
      
   

        
      
   
    );
  }
}

export default Parent;

// 子组件
import React from 'react';

const Child = (props) => {
  const handleClick = () => {
    props.handleChildClick();
  }

  return (
    Click Me
  );
};

export default Child;

上面的代码中，我们定义了一个 Parent 组件和一个 Child 组件，Parent 组件通过 props 将自己的 handleMethod 方法传递给 Child 组件，然后在 Child 组件中通过 props 的方式调用该方法。当用户在 Child 组件中点击按钮时，就会执行该方法并在控制台中输出一条信息。

三、通过 ref 调用父组件方法

上面介绍的方式通过 props 在父组件和子组件之间传递方法，比较常见且实用。但是，在某些情况下，我们需要在子组件中直接调用父组件的方法，而不是通过 props 传递。这时我们可以使用 React 提供的 ref 属性来实现。

下面我们通过一个例子来演示如何使用 ref 调用父组件的方法。

// 父组件
import React, { Component } from 'react';

class Parent extends Component {
  handleMethod() {
    console.log('Hello from Parent!');
  }

  render() {
    return (
      
   

        
      
   
    );
  }
}

export default Parent;

// 子组件
import React, { Component } from 'react';

class Child extends Component {
  handleClick = () => {
    this.props.handleChildClick();
  }

  render() {
    return (
      
   

        Click Me
      
   
    );
  }
}

export default Child;

上面的代码中，我们定义了一个 Parent 组件和一个 Child 组件，Parent 组件中定义了一个 handleMethod 方法，Child 组件中通过 props 的方式获取该方法并定义一个 handleClick 方法，该方法在按钮点击时被调用。当使用 ref 获取 Child 组件的实例时，我们就可以在外面访问 Child 组件中定义的方法了。

// 父组件
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  handleMethod = () => {
    console.log('Hello from Parent!');
  }

  handleClick = () => {
    this.child.handleChildClick();
  }

  render() {
    return (
      
   

         { this.child = child; }} />
        
     Click Me
      
    
   
    );
  }
}

export default Parent;

// 子组件
import React from 'react';

const Child = (props) => {
  const handleChildClick = () => {
    console.log('Hello from Child!');
  }

  return (
    Click Me
  );
};

export default Child;

上面的代码中，我们在 Parent 组件中使用 ref 获取 Child 组件的实例，并将该实例保存在 this.child 中。然后，当用户在 Parent 组件中点击按钮时，我们调用 this.child.handleChildClick() 方法即可。在 Child 组件中定义的 handleChildClick 方法将会被执行，控制台中输出一条信息。

四、总结

本篇文章主要介绍了在 React 中子组件调用父组件方法的两种方式：通过 props 传递方法和通过 ref 调用方法。通过 props 传递方法是比较常见且实用的方式，可在父子组件之间实现双向通信。而通过 ref 调用方法则适用于子组件需要主动通知父组件的场景，但相对来说使用的场景会比较少。