react使用ref调用子组件的方法

Class类组件

import React, { useRef } from 'react';

const MyComponent = () => {
  const myComponentRef = useRef(null);

  const handleClick = () => {
    // 调用MyComponent组件的方法
    myComponentRef.current.myMethod();
  };

  return (
    <div>
      <MyComponent ref={myComponentRef} />
      <button onClick={handleClick}>Call MyComponent Method</button>
    </div>
  );
};

class MyComponent extends React.Component {
  myMethod() {
    console.log('MyComponent method called');
  }

  render() {
    return <div>MyComponent</div>;
  }
}

在上面的示例中，我们首先创建了一个ref，命名为myComponentRef。然后，在MyComponent组件上使用ref={myComponentRef}将ref绑定到该组件上。接下来，我们在父组件中定义了一个点击事件处理函数handleClick，当点击按钮时，会调用myComponentRef.current.myMethod()来调用MyComponent组件的myMethod方法。

需要注意的是，在函数组件中使用ref时，需要使用useRef钩子。而在类组件中，可以直接使用React.createRef()来创建ref。

函数式组件

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const MyFunctionalComponent = forwardRef((props, ref) => {
  const myMethod = () => {
    console.log('MyFunctionalComponent method called');
  };

  useImperativeHandle(ref, () => ({
    myMethod
  }));

  return <div>My Functional Component</div>;
});

const ParentComponent = () => {
  const functionalComponentRef = useRef(null);

  const handleClick = () => {
    // 调用函数式组件的方法
    functionalComponentRef.current.myMethod();
  };

  return (
    <div>
      <MyFunctionalComponent ref={functionalComponentRef} />
      <button onClick={handleClick}>Call Functional Component Method</button>
    </div>
  );
};

在上面的示例中，我们首先使用forwardRef函数包裹了函数式组件MyFunctionalComponent。在useImperativeHandle钩子中，我们将myMethod方法暴露给父组件通过ref进行调用。

然后，在父组件ParentComponent中，我们创建了一个ref，命名为functionalComponentRef。在MyFunctionalComponent组件上，我们将ref绑定到该组件上，通过ref={functionalComponentRef}。

最后，我们在handleClick点击事件处理函数中，通过functionalComponentRef.current.myMethod()来调用函数式组件的myMethod方法。

请注意，函数式组件本身不支持直接使用ref，需要借助forwardRef和useImperativeHandle来实现。这样，你就可以在函数式组件中使用ref获取到组件的方法，并进行相应的操作。