React中实现父组件调用子组件的三种方法

// ChildComponent.js
class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Child method called');
  };

  render() {
    return <button onClick={this.doSomething}>Call Child Method</button>;
  }
}

// ParentComponent.js
class ParentComponent extends React.Component {
  callChildMethod = ref => {
    if (ref) {
      ref.current.doSomething();
    }
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.callChildMethod} />
      </div>
    );
  }
}

// ChildComponent.js
class ChildComponent extends React.Component {
  render() {
    return <button onClick={() => this.props.onChildMethod()}>Call Child Method</button>;
  }
}

// ParentComponent.js
class ParentComponent extends React.Component {
  handleChildMethod = () => {
    console.log('Child method called from parent');
  };

  render() {
    return (
      <div>
        <ChildComponent onChildMethod={this.handleChildMethod} />
      </div>
    );
  }
}

// Context.js
const MethodContext = React.createContext();

// ChildComponent.js
class ChildComponent extends React.Component {
  render() {
    return (
      <MethodContext.Consumer>
        {callParentMethod => (
          <button onClick={() => callParentMethod()}>Call Parent Method</button>
        )}
      </MethodContext.Consumer>
    );
  }
}

// ParentComponent.js
class ParentComponent extends React.Component {
  handleParentMethod = () => {
    console.log('Parent method called from child');
  };

  render() {
    return (
      <MethodContext.Provider value={this.handleParentMethod}>
        <ChildComponent />
      </MethodContext.Provider>
    );
  }
}

import {useRef} from 'react';
 
function A(){
 
  // 获取子组件对象
  const children= useRef();
 
  return (
    <div>
      <B ref={children}/>
    </div>
  );
}
 
export default A;

import React, {forwardRef, useImperativeHandle} from "react";
 
function B(props,ref){
  // 暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    getVal: () => {
      return '返回数据';
    }
  }))
​​​​​​​}
 
B = forwardRef(B);
export default B;