React函数式组件环境中父组件调用子组件的方法

import React, { useRef, useCallback } from 'react';
 
// 子组件
const ChildComponent = React.forwardRef((props, ref) => {
  const doSomething = useCallback(() => {
    console.log('Do something in the child component');
  }, []);
 
  // 当组件挂载后，将这个组件的实例传递给父组件
  React.useImperativeHandle(ref, () => ({
    doSomething
  }));
 
  return <div>Child Component</div>;
});
 
// 父组件
const ParentComponent = () => {
  const childRef = useRef(null);
 
  const handleClick = () => {
    if (childRef.current) {
      childRef.current.doSomething();
    }
  };
 
  return (
    <>
      <button onClick={handleClick}>Call Child Method</button>
      <ChildComponent ref={childRef} />
    </>
  );
};
 
export default ParentComponent;

ChildComponent是一个函数式组件，它使用useImperativeHandle钩子来暴露一个doSomething方法。ParentComponent是父组件，它使用useRef钩子创建了一个ref并将其传递给ChildComponent。当按钮被点击时，父组件通过ref调用子组件的doSomething方法。