为什么不直接将handleClick作为prop传递给<Child />

function Child(props) {
  var someState = //...
  return <div onClick={() => props.handleClick(someState)}>child</div>
}

function Parent(){
  // catch return from handleClick in Child
  const handleClick = (value) => console.log("child clicked", value);

  return <div>
    <Child handleClick={handleClick} />
  </div>
}

要捕获Child组件中handleClick函数的返回值，可以使用useImperativeHandle钩子。该钩子允许您将子组件中的函数或对象暴露给父组件。
下面是如何在代码中使用useImperativeHandle的示例：”

import { useRef, useImperativeHandle } from "react";

function Child(props, ref) {
  const handleClick = () => 1;
  
  useImperativeHandle(ref, () => ({
    handleClick,
  }));

  return <div onClick={handleClick}>child</div>;
}

Child = React.forwardRef(Child);

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

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

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

在上面的代码中，我们使用useRef钩子定义了一个ref，并将其作为prop传递给Child组件。然后我们使用React.forwardRef函数 Package Child组件，该函数允许我们将ref转发给子组件。
在Child组件内部，我们使用useImperativeHandle钩子通过ref公开handleClick函数，父组件现在可以通过ref访问该函数。
在Parent组件中，我们定义了一个函数handleChildClick，当用户单击按钮时调用该函数，该函数使用ref调用Child组件的handleClick函数，并记录返回值。
请注意，在本例中，handleClick函数始终返回1，您可以根据自己的需求修改此函数以返回动态值。