React 开发小技巧：父组件如何‘操控’子组件的函数？

引言

"在 React 开发中，我们常常遇到父组件需要'指挥'子组件执行某些操作的场景。比如，点击父组件的按钮，触发子组件的某个动画或数据刷新。今天，我就来分享几种在 Hooks 环境下，父组件如何优雅地调用子组件方法的实战技巧！"

方法 1：useImperativeHandle + forwardRef（推荐方式）

适用场景：父组件需要精确控制子组件的某些方法。

jsx 复制代码

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

// 子组件（使用 forwardRef 暴露方法）
const ChildComponent = forwardRef((props, ref) => {
  const [count, setCount] = React.useState(0);

  // 暴露方法给父组件
  useImperativeHandle(ref, () => ({
    increment: () => setCount(count + 1),
    reset: () => setCount(0),
  }));

  return <div>子组件计数: {count}</div>;
});

// 父组件
const ParentComponent = () => {
  const childRef = useRef(null);

  const handleIncrement = () => {
    childRef.current?.increment(); // 调用子组件方法
  };

  const handleReset = () => {
    childRef.current?.reset(); // 调用子组件方法
  };

  return (
    <div>
      <button onClick={handleIncrement}>增加子组件计数</button>
      <button onClick={handleReset}>重置子组件计数</button>
      <ChildComponent ref={childRef} />
    </div>
  );
};

优点：

精准控制暴露的方法，避免直接操作 DOM。
符合 React 数据驱动的设计理念。

缺点：

需要额外使用 forwardRef 和 useImperativeHandle，略显繁琐。

方法 2：通过 props 传递回调（简单场景适用）

适用场景：父组件只需要简单触发子组件的逻辑，而不是直接调用方法。

jsx 复制代码

import React, { useState } from 'react';

const ChildComponent = ({ onAction }) => {
  return <button onClick={onAction}>子组件按钮</button>;
};

const ParentComponent = () => {
  const handleChildAction = () => {
    console.log("父组件接收到子组件的回调");
  };

  return <ChildComponent onAction={handleChildAction} />;
};

优点：

简单直接，适合简单交互。

缺点：

如果子组件逻辑复杂，可能会造成 props 传递过多，代码臃肿。

方法 3：使用自定义事件（Pub/Sub 模式）

适用场景：跨层级组件通信，或者多个组件需要监听同一事件。

jsx 复制代码

import React, { useEffect } from 'react';
import { EventEmitter } from 'events';

const eventBus = new EventEmitter();

const ChildComponent = () => {
  const handleEvent = () => {
    console.log("子组件收到事件");
  };

  useEffect(() => {
    eventBus.on('triggerChild', handleEvent);
    return () => eventBus.off('triggerChild', handleEvent);
  }, []);

  return <div>子组件</div>;
};

const ParentComponent = () => {
  const triggerChild = () => {
    eventBus.emit('triggerChild');
  };

  return (
    <div>
      <button onClick={triggerChild}>触发子组件事件</button>
      <ChildComponent />
    </div>
  );
};

优点：

适用于跨组件通信，解耦父子组件。

缺点：

需要引入事件管理，可能增加复杂度。

总结（结尾引导讨论）

"在实际开发中，我会优先选择 useImperativeHandle，因为它更符合 React 的设计哲学。当然，如果只是简单交互，props 回调也足够用。大家平时更习惯用哪种方式呢？欢迎在评论区分享你的看法！"

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！