How to call child component method from parent component in react?

在 React 中，父组件调用子组件的方法通常涉及几个步骤，关键是通过 ref 来获取子组件的实例，并可以调用其方法。以下是如何实现的具体步骤：

步骤 1: 创建子组件

首先，我们定义一个子组件，并在其中创建一个我们希望从父组件调用的方法。例如，我们创建一个 ChildComponent，其中包含一个名为 childMethod 的方法：

jsx
import React from 'react';

class ChildComponent extends React.Component {
  childMethod() {
    alert('这是子组件的方法被调用');
  }

  render() {
    return <div>子组件</div>;
  }
}

export default ChildComponent;

步骤 2: 在父组件中使用 ref

在父组件中，我们使用 React 的 ref 属性来引用子组件。这样做可以让我们在父组件中直接访问子组件的方法和属性。

jsx
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建 ref
    this.childRef = React.createRef();
  }

  callChildMethod = () => {
    // 使用 ref 调用子组件的方法
    this.childRef.current.childMethod();
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.callChildMethod}>调用子组件方法</button>
      </div>
    );
  }
}

export default ParentComponent;

解释

在上面的例子中，我们首先在 ParentComponent 的构造函数中创建了一个 ref，并在渲染 ChildComponent 时将这个 ref 传递给它。通过这种方式， this.childRef.current 将会引用 ChildComponent 的实例，使得我们可以调用 this.childRef.current.childMethod()。

这种方法对于在 React 组件间直接通信非常有效，尤其是当子组件有内部状态或方法需要被父组件触发时。此外，使用 ref 是官方推荐的方式之一，用于在父组件中直接访问子组件的实例和方法。