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

Question

示例代码是ionic-react的，但我的实际问题与ionic无关，它是一个与React/JSX相关的问题。

简化的渲染方法：

return (
  <IonPage>
    <IonContent>
      <div>Hello!</div>
    </IonContent>
  </IonPage>
)

我需要获取对IonContent组件的引用。我不需要对HTMLElement (我可以使用React.createRef())的引用。有可能吗?我怎样才能得到它呢？

背景信息: IonContent定义了一个getScrollElement()方法(参见：https://ionicframework.com/docs/api/content#methods)。我需要访问它来以编程方式滚动内容。在离子内容HTMLElement上设置scrollTop对我来说不起作用，而且据我所知，它不应该这样做。

Answer 1

它是实际的引用，但它返回一个promise，所以您可能想要解析它：getScrollElement() => Promise<HTMLElement>

<IonContent ref={myRef}>
  <div>Hello!</div>
</IonContent>;

// getScrollElement returns a promise in async func
const scrollElement = await myRef.current.getScrollElement();

Answer 2

对于任何正在寻找TypeScript答案的人。

const contentEle = useRef<HTMLIonContentElement>(null);
const scrollEle = await contentEle.current?.getScrollElement();
scrollEle?.scrollTo({ top: 0 });
    
return (
   <IonContent ref={contentEle}>
       ...
   </IonContent>
)