react父子组件如何调用

父组件调用子组件方法

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

父组件示例代码：

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

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

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

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

子组件示例代码：

import { forwardRef, useImperativeHandle } from 'react';

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

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

子组件调用父组件方法

通过 props 传递回调函数给子组件。子组件在需要时调用这个 props 方法。

父组件示例代码：

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

  return <ChildComponent onParentCall={parentMethod} />;
}

子组件示例代码：

function ChildComponent({ onParentCall }) {
  const handleClick = () => {
    onParentCall();
  };

  return <button onClick={handleClick}>调用父组件方法</button>;
}

使用 Context 跨层级通信

创建 Context 并共享状态和方法，适用于深层嵌套组件。

Context 示例代码：

import { createContext, useContext } from 'react';

const FamilyContext = createContext();

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

  return (
    <FamilyContext.Provider value={{ sharedMethod }}>
      <ChildComponent />
    </FamilyContext.Provider>
  );
}

function ChildComponent() {
  const { sharedMethod } = useContext(FamilyContext);

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

使用自定义事件通信

通过自定义事件实现完全解耦的组件通信，适用于非父子关系的组件。

事件总线示例代码：

const events = {};

const eventBus = {
  on(event, callback) {
    if (!events[event]) events[event] = [];
    events[event].push(callback);
  },
  emit(event, data) {
    if (events[event]) {
      events[event].forEach(callback => callback(data));
    }
  }
};

// 组件A
eventBus.on('customEvent', data => {
  console.log('收到事件:', data);
});

// 组件B
eventBus.emit('customEvent', { message: 'Hello' });