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

在JSX中获取组件的引用以调用其上的方法，可以通过以下几种方式实现：

使用ref属性：在组件的JSX标签上添加ref属性，并将其赋值给一个变量。这样就可以通过该变量来访问组件的实例，并调用其方法。例如：

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>
    );
  }
}

在上述例子中，通过使用React.createRef()创建一个ref对象，并将其赋值给myComponentRef变量。然后将该ref对象传递给MyComponent组件的ref属性。在ParentComponent组件中，可以通过this.myComponentRef.current来获取MyComponent组件的实例，并调用其doSomething方法。

使用回调函数：在组件的JSX标签上添加一个回调函数属性，并将组件的实例作为参数传递给该回调函数。这样就可以在回调函数中获取组件的引用，并调用其方法。例如：

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>
    );
  }
}

在上述例子中，通过将一个匿名函数赋值给ref属性，该匿名函数接收组件的实例作为参数，并将其赋值给this.myComponent变量。在ParentComponent组件中，可以通过this.myComponent来获取MyComponent组件的实例，并调用其doSomething方法。

无论是使用ref属性还是回调函数，都可以获取到组件的引用以调用其上的方法。具体选择哪种方式取决于具体的场景和个人偏好。