父组件调用子组件方法

问题

在 React 中如何实现父组件调用子组件中的方法？

解答

类组件实现

子组件：

class ChildComponent extends React.Component {
  childMethod() {
    console.log('子组件方法被调用');
    // 子组件中需要执行的操作
  }

  render() {
    return <div>子组件</div>;
  }
}

父组件：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // 调用子组件的方法
    this.childRef.current.childMethod();
  }

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

函数组件实现

子组件：

import { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod() {
      console.log('子组件方法被调用');
      // 子组件中需要执行的操作
    }
  }));

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

父组件：

import { useRef } from 'react';

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

  const handleClick = () => {
    // 调用子组件的方法
    childRef.current.childMethod();
  };

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

关键点

• 类组件直接在实例上定义方法，通过 createRef 创建引用
• 函数组件需要使用 forwardRef 包裹，配合 useImperativeHandle 暴露方法
• 父组件通过 ref.current 访问子组件暴露的方法
• 这种方式打破了 React 单向数据流，应谨慎使用，优先考虑通过 props 传递回调函数