react函数组件使用useImperativeHandle

useImperativeHandle是React Hooks中的一个API，它可以让你在函数组件中暴露出自定义的方法给父组件调用。使用useImperativeHandle需要传入两个参数，第一个参数是一个ref对象，第二个参数是一个函数，这个函数返回一个对象，这个对象中的属性和方法会被暴露给父组件。在子组件中，需要使用forwardRef函数来包裹子组件，并将ref对象传递给子组件。下面是一个使用useImperativeHandle的例子：

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

const Child = forwardRef((props, ref) => {
  const handleClick = () => {
    console.log('Child component is clicked');
  };

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

  return <button onClick={handleClick}>Click me</button>;
});

const Parent = () => {
  const childRef = useRef(null);

  const handleChildClick = () => {
    childRef.current.handleClick();
  };

  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleChildClick}>Click child component</button>
    </>
  );
};

在上面的例子中，Child组件中的handleClick方法被暴露给了Parent组件，Parent组件可以通过childRef.current.handleClick()来调用Child组件中的handleClick方法。