当前位置：首页 > React

react如何实现父子方法调用

2026-01-25 01:46:14React

父子组件方法调用的实现方式

在React中，父子组件之间的方法调用主要通过props传递和回调函数实现。以下是几种常见方法：

父组件调用子组件方法

使用ref获取子组件实例 通过React.createRef()或useRef钩子创建ref，附加到子组件上，从而直接调用子组件方法。

// 子组件
class Child extends React.Component {
  childMethod() {
    console.log('子组件方法被调用');
  }
  render() {
    return <div>子组件</div>;
  }
}

// 父组件
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

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

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

函数式子组件使用useImperativeHandle 对于函数式组件，需配合forwardRef和useImperativeHandle暴露方法。

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

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

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

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

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

子组件调用父组件方法

通过props传递回调函数 父组件将方法作为prop传递给子组件，子组件在适当时机调用。

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

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

// 子组件
const Child = ({ onParentMethod }) => {
  const handleClick = () => {
    onParentMethod();
  };

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

跨层级组件通信

对于深层嵌套组件，可考虑使用Context API或状态管理工具（如Redux）实现方法共享，避免prop逐层传递。

// 创建Context
const MethodContext = React.createContext();

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

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

// 子组件
const Child = () => {
  return (
    <MethodContext.Consumer>
      {({ sharedMethod }) => (
        <button onClick={sharedMethod}>调用共享方法</button>
      )}
    </MethodContext.Consumer>
  );
};