确保使用：<ion-refresher slot="fixed"> - Ionic 8 React

Question

我已添加到我的项目中，但在我的控制台中不断收到错误

Make sure you use: <ion-refresher slot="fixed">

，并且无法在项目中工作。

<IonContent>
 <IonRefresher
  slot="fixed"
  onIonRefresh={handleRefresh}
  pullFactor={0.5}
  pullMin={40}
 >
  <IonRefresherContent
   pullingText="Pull to refresh"
   refreshingSpinner="circles"
   refreshingText="Refreshing..."
  ></IonRefresherContent>
 </IonRefresher>

/* rest of code */

</IonContent>

我已经浏览了所有文档和所有回购问题等，但找不到任何解决方案。

Answer 1

我通过使用以下方法完成了这项工作：

useEffect(() => {
 const refresher = document.getElementById("refresher");

 if (refresher) {
  refresher.addEventListener(
   "ionRefresh",
   handleRefresh as unknown as EventListener
  );
 }

 return () => {
  if (refresher) {
   refresher.removeEventListener(
    "ionRefresh",
    handleRefresh as unknown as EventListener
   );
  }
 };
}, []);


<ion-refresher
 id="refresher"
 slot="fixed"
 onIonRefresh={(e: CustomEvent) => handleRefresh(e)}
>
 <ion-refresher-content />
</ion-refresher>

似乎反应版本不起作用，所以在那之前，这似乎是一个可行的解决方案。