react如何实现父子方法调用

父组件调用子组件方法

通过 useRef 和 forwardRef 结合暴露子组件方法。在子组件中使用 useImperativeHandle 定义可被父组件调用的方法。

父组件示例代码：

import { useRef } from 'react';
import Child from './Child';

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

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

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

子组件示例代码：

import { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod: () => {
      console.log('子组件方法被调用');
    }
  }));

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

子组件调用父组件方法

通过 props 将父组件的方法传递给子组件，子组件直接调用接收到的函数属性。

父组件示例代码：

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

  return <Child onCallParent={parentMethod} />;
}

子组件示例代码：

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

使用 Context 跨层级调用

对于深层嵌套组件，可以使用 React Context 传递方法。

创建 Context：

const MethodContext = createContext();

function App() {
  const sharedMethod = () => {
    console.log('共享方法被调用');
  };

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

子组件调用：

function DeepChild() {
  const contextMethod = useContext(MethodContext);

  return (
    <button onClick={contextMethod}>
      调用上下文方法
    </button>
  );
}

事件总线模式

通过自定义事件系统实现任意组件间通信，适合复杂场景。

创建事件总线：

const EventBus = {
  listeners: {},
  emit(event, ...args) {
    this.listeners[event]?.forEach(cb => cb(...args));
  },
  on(event, callback) {
    if (!this.listeners[event]) this.listeners[event] = [];
    this.listeners[event].push(callback);
  }
};

父组件监听：

useEffect(() => {
  EventBus.on('childEvent', (data) => {
    console.log('收到子组件事件', data);
  });
}, []);

子组件触发：

const triggerEvent = () => {
  EventBus.emit('childEvent', { value: 123 });
};