React中如何从父组件调用子组件内部函数？

初始组件代码 #

const Parent = (props) => {
  return <Child {...props} />
};

const Child = (props) => {
  function handleClick() {
   ...
  }
  return <div {...props}><a onClick={handleClick}>link</a></div>;
}

需求与初始方案 #

想要在父组件中调用子组件内部的handleClick函数，最初尝试通过状态配合useEffect触发：

const Parent = (props) => {
  const [toggle, setToggle] = useState(false);
  return <Child toggle={toggle} {...props} />
};

const Child = (props) => {
  useEffect(() => { if (toggle) handleClick() }, [toggle]);
  function handleClick() { 
    ... 
  }      
  return <div {...props}><a onClick={handleClick}>link</a></div>;
}

但这种方式违背了useEffect的设计初衷，属于不合理的解决方案。

推荐实现方式：利用Ref调用子组件方法 #

React中推荐通过useRef配合forwardRef、useImperativeHandle来实现父组件调用子组件内部方法，这是更符合框架设计逻辑的做法：

改造子组件 #

const Child = (props, ref) => {
  function handleClick() {
    // 原有的点击逻辑
    ...
  }

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

  return <div {...props}><a onClick={handleClick}>link</a></div>;
};

// 用forwardRef传递父组件的ref到子组件内部
const ForwardedChild = React.forwardRef(Child);

父组件中调用 #

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

  // 父组件自定义事件触发子组件方法
  const triggerChildClick = () => {
    childRef.current?.handleClick();
  };

  return (
    <div>
      {/* 示例：父组件按钮触发子组件方法 */}
      <button onClick={triggerChildClick}>触发子组件点击逻辑</button>
      <ForwardedChild {...props} ref={childRef} />
    </div>
  );
};

方案说明 #

• React.forwardRef用于将父组件创建的ref传递到子组件内部
• useImperativeHandle可以精准控制暴露给父组件的方法，避免暴露整个子组件实例，更安全可控
• 这种方式直接通过ref调用子组件方法，比状态触发的方式更直观，完全符合React的设计理念

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