react如何在类组件中使用ref拿到函数组件内的函数

在React中，如果你想在类组件中通过ref访问函数组件内的函数，你需要采取一些额外的步骤，因为函数组件本质上是没有实例的，不像类组件那样可以直接通过ref访问。但是，你可以通过一些技巧来实现

方法：使用forwardRef

React提供了React.forwardRef这个API，它允许你将ref自动地通过组件传递给子组件。首先，你需要在函数组件内部使用useImperativeHandle来定义可以被父组件通过ref访问的方法。

步骤1: 创建函数组件并使用forwardRef

import React, { useImperativeHandle, forwardRef } from 'react';
 
const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert('Hello from child component!');
    }
  }));
 
  return <div>Child Component</div>;
});

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

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
 
class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }
 
  callChildMethod = () => {
    if (this.childRef.current) {
      this.childRef.current.showAlert(); // 调用子组件中的方法
    }
  };
 
  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.callChildMethod}>Call Child Method</button>
      </div>
    );
  }
}