React中能否获取子组件点击函数的返回值？useImperativeHandle用法求教

方案一：Props传递回调（推荐，符合React单向数据流） #

这是最常规的实现方式，子组件在触发handleClick后，通过父组件传入的回调函数将返回值传递给父组件：

function Child({ onChildClick }) {
  const handleClick = () => {
    const result = 1;
    // 调用父组件传递的回调，传递返回值
    onChildClick(result);
    return result;
  };
  return <div onClick={handleClick}>child</div>;
}

function Parent() {
  // 处理子组件返回值的函数
  const handleChildResult = (result) => {
    console.log("子组件handleClick的返回值：", result);
    // 在这里对返回值做后续处理
  };

  return (
    <div>
      <Child onChildClick={handleChildResult} />
    </div>
  );
}

方案二：useImperativeHandle + forwardRef（适合父组件主动触发的场景） #

如果你的需求是父组件主动调用子组件的handleClick并获取返回值（而非子组件自身点击时自动传递），可以用这种方式。需要通过forwardRef包裹子组件，配合useImperativeHandle将指定方法暴露给父组件的ref：

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

// 用forwardRef接收父组件传递的ref
const Child = forwardRef((props, ref) => {
  const handleClick = () => {
    const result = 1;
    return result;
  };

  // 暴露getClickResult方法给父组件的ref
  useImperativeHandle(ref, () => ({
    getClickResult: handleClick
  }));

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

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

  // 父组件主动触发，获取子组件返回值
  const getChildResult = () => {
    const result = childRef.current?.getClickResult();
    console.log("子组件handleClick的返回值：", result);
  };

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={getChildResult}>获取子组件返回值</button>
    </div>
  );
}

注意 #

若仅需在子组件自身点击时让父组件拿到返回值，方案一更符合React的设计理念。useImperativeHandle主要用于父组件需要主动操作子组件的场景，尽量避免用它替代props回调的单向数据流模式。

内容的提问来源于stack exchange，提问作者kan