当前位置：首页 > React

react 一个组件如何调用另一个组件的方法

2026-01-26 10:34:49React

在 React 中，组件之间调用方法可以通过多种方式实现，具体取决于组件的层级关系和设计需求。以下是常见的几种方法：

通过 Props 传递方法

父组件可以将方法作为 props 传递给子组件，子组件直接调用该方法。

// 父组件
function Parent() {
  const handleClick = () => {
    console.log('方法被调用');
  };

  return <Child onClick={handleClick} />;
}

// 子组件
function Child({ onClick }) {
  return <button onClick={onClick}>调用父组件方法</button>;
}

使用 Refs 调用子组件方法

父组件通过 useRef 或 createRef 获取子组件的引用，直接调用子组件暴露的方法。

react 一个组件如何调用另一个组件的方法

// 子组件（使用 forwardRef 和 useImperativeHandle）
const Child = React.forwardRef((props, ref) => {
  const childMethod = () => {
    console.log('子组件方法被调用');
  };

  React.useImperativeHandle(ref, () => ({
    childMethod
  }));

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

// 父组件
function Parent() {
  const childRef = React.useRef();

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

  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>调用子组件方法</button>
    </>
  );
}

使用 Context API 共享方法

通过 React 的 Context 在多个组件间共享方法，避免逐层传递 props。

const MethodContext = React.createContext();

// 父组件提供方法
function Parent() {
  const sharedMethod = () => {
    console.log('共享方法被调用');
  };

  return (
    <MethodContext.Provider value={{ sharedMethod }}>
      <Child />
    </MethodContext.Provider>
  );
}

// 子组件调用方法
function Child() {
  const { sharedMethod } = React.useContext(MethodContext);

  return <button onClick={sharedMethod}>调用共享方法</button>;
}

使用事件总线或全局状态管理

对于跨层级或复杂场景，可以通过事件总线（如 EventEmitter）或状态管理工具（如 Redux、MobX）触发方法。

// 使用事件总线示例
import EventEmitter from 'events';
const eventBus = new EventEmitter();

// 组件 A 注册事件
function ComponentA() {
  React.useEffect(() => {
    eventBus.on('callMethod', () => {
      console.log('方法被触发');
    });
  }, []);

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

// 组件 B 触发事件
function ComponentB() {
  const triggerMethod = () => {
    eventBus.emit('callMethod');
  };

  return <button onClick={triggerMethod}>触发方法</button>;
}