如何获取对JSX中使用的组件的引用以调用其上的方法？

class MyComponent extends React.Component {
  doSomething() {
    // 执行一些操作
  }

  render() {
    return <div>My Component</div>;
  }
}

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

  handleClick() {
    this.myComponentRef.current.doSomething();
  }

  render() {
    return (
      <div>
        <MyComponent ref={this.myComponentRef} />
        <button onClick={() => this.handleClick()}>调用方法</button>
      </div>
    );
  }
}

class MyComponent extends React.Component {
  doSomething() {
    // 执行一些操作
  }

  render() {
    return <div>My Component</div>;
  }
}

class ParentComponent extends React.Component {
  handleClick(component) {
    component.doSomething();
  }

  render() {
    return (
      <div>
        <MyComponent
          ref={component => {
            this.myComponent = component;
          }}
        />
        <button onClick={() => this.handleClick(this.myComponent)}>
          调用方法
        </button>
      </div>
    );
  }
}