react 父组件 任何调用 子组件的方法 forwardRef useImperativeHandle

在React中，你可以使用forwardRef和useImperativeHandle来从父组件访问子组件的方法。这种模式常用于需要从父组件控制子组件行为的场景。

以下是一个简单的例子：

// 子组件
import React, { useRef, useImperativeHandle } from 'react';
 
const ChildComponent = React.forwardRef((props, ref) => {
  // 定义一个方法
  const childMethod = () => {
    console.log('Child method called');
  };
 
  // 通过useImperativeHandle将方法暴露给父组件
  useImperativeHandle(ref, () => ({
    childMethod
  }));
 
  return <div>Child Component</div>;
});
 
export default ChildComponent;
 
// 父组件
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';
 
const ParentComponent = () => {
  const childRef = useRef(null);
 
  const callChildMethod = () => {
    if (childRef.current) {
      childRef.current.childMethod();
    }
  };
 
  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={callChildMethod}>Call Child Method</button>
    </>
  );
};
 
export default ParentComponent;

在这个例子中，ChildComponent使用forwardRef来创建一个可以被引用的组件，并使用useImperativeHandle来暴露其方法。ParentComponent通过useRef创建一个ref引用ChildComponent实例，并在点击按钮时调用childMethod。