如何在Reactjs中从外部调用主组件内部的方法

// 子组件
class ChildComponent extends React.Component {
  methodToCall() {
    console.log('Method called from outside!');
  }

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

// 父组件
class ParentComponent extends React.Component {
  handleButtonClick = () => {
    this.childComponentRef.methodToCall();
  }

  render() {
    return (
      <div>
        <ChildComponent ref={el => this.childComponentRef = el} onButtonClick={this.handleButtonClick} />
      </div>
    );
  }
}

// 创建一个上下文
const MyContext = React.createContext();

// 子组件
class ChildComponent extends React.Component {
  static contextType = MyContext;

  methodToCall() {
    console.log('Method called from outside!');
  }

  render() {
    return null;
  }
}

// 父组件
class ParentComponent extends React.Component {
  callChildMethod = () => {
    this.context.methodToCall();
  }

  render() {
    return (
      <MyContext.Provider value={{ methodToCall: this.callChildMethod }}>
        <ChildComponent />
        <button onClick={this.callChildMethod}>Call Method</button>
      </MyContext.Provider>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  methodToCall() {
    console.log('Method called from outside!');
  }

  render() {
    return null;
  }
}

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

  callChildMethod = () => {
    if (this.childRef.current) {
      this.childRef.current.methodToCall();
    }
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.callChildMethod}>Call Method</button>
      </div>
    );
  }
}