react父组件如何调用子组件的方法

使用 ref 直接调用子组件方法

在父组件中通过 useRef 或 createRef 创建 ref，并将其传递给子组件。子组件需要使用 forwardRef 和 useImperativeHandle 暴露方法。

父组件示例：

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

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

  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 传递回调函数

父组件可以通过 props 将回调函数传递给子组件，子组件在适当时机调用该回调。

父组件示例：

function Parent() {
  const handleChildEvent = () => {
    console.log('父组件处理子组件事件');
  };

  return <Child onEvent={handleChildEvent} />;
}

子组件示例：

function Child({ onEvent }) {
  const handleClick = () => {
    onEvent();
  };

  return <button onClick={handleClick}>触发事件</button>;
}

使用 Context API 进行通信

对于深层嵌套的组件，可以使用 Context API 实现跨层级方法调用。

创建上下文：

import { createContext, useContext } from 'react';

const ChildContext = createContext();

export function useChildMethods() {
  return useContext(ChildContext);
}

export function ChildProvider({ children, methods }) {
  return (
    <ChildContext.Provider value={methods}>
      {children}
    </ChildContext.Provider>
  );
}

父组件使用：

function Parent() {
  const childMethods = {
    doSomething: () => console.log('执行子组件方法')
  };

  return (
    <ChildProvider methods={childMethods}>
      <Child />
    </ChildProvider>
  );
}

子组件使用：

function Child() {
  const { doSomething } = useChildMethods();

  return <button onClick={doSomething}>执行方法</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));
    }
  }
};

父组件触发事件：

function Parent() {
  const handleClick = () => {
    EventBus.emit('callChildMethod', { data: 'some data' });
  };

  return <button onClick={handleClick}>触发子组件方法</button>;
}

子组件监听事件：

function Child() {
  useEffect(() => {
    EventBus.on('callChildMethod', (data) => {
      console.log('接收到事件:', data);
    });
    return () => {
      // 清理事件监听
    };
  }, []);

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