Reactjs 检测标签的变化与离子反应

这个问题我已经被问过好几次了，但我还是没能让它起作用。我有一个如下设置的选项卡栏：

<IonFooter class="swipeable-pages-footer">
    <div className="dot-indicator">
        {
            this.props.pages.map((p, i) => (
                <IonIcon icon={i === index ? ellipse : ellipseOutline} style={{ "transform": "scale(0.6)" }} key={i}></IonIcon>
            ))
        }
    </div>
    <IonToolbar class="swipeable-pages-footer-toolbar">
        <IonTabs>
            <IonRouterOutlet >
            </IonRouterOutlet>

            <IonTabBar slot="bottom" class="swipeable-tab-bar" tabIndex={index}>
                {
                    this.props.tabs.map((t, i) => (
                        <IonTabButton key={i} tab={t.tabName} href={t.tabName} class={"swipeable-tabs-tab-button " + t.tabName} selected={i === index ? true : false} disabled={t?.disabled}>
                            <IonIcon class="swipeable-tabs-tab-icon" icon={t?.icon}></IonIcon>
                            <IonLabel class="swipeable-tabs-tab-label">{t.label}</IonLabel>
                        </IonTabButton>
                    ))
                }
            </IonTabBar>
        </IonTabs>
    </IonToolbar>
</IonFooter>

它只调用该函数一次，不再调用（甚至在更改选项卡时也不调用）。我在这个问题上发现了一个github问题，有人说要将

OnOnIntabsDidChange

移动到

IonTabBar

。这样做没有任何作用-它仍然不会在选项卡更改时调用函数

查看IonTabs和的文档，只需简单的谷歌搜索

onIonTabsDidChange

，

onIonTabsDidChange

上没有任何内容，只有

ionTabsDidChange

（没有“开”）。但是，在

IonTabs

和

IonTabBar

上使用此选项会产生类似的错误：

Type '{ children: Element[]; ionTabsDidChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<IonTabs> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
  Property 'ionTabsDidChange' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<IonTabs> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'. Did you mean '"onIonTabsDidChange"'?

---

这就是我被困的地方。有两个地方告诉我应该是

ionTabsDidChange

。有两个地方说它应该是

oniontabsdichange

，但无论我使用什么，当标签改变时它仍然不会被触发。

你在stackblitz或code sandbox中有一个小样本项目吗？没关系，它现在似乎正在工作。我仍然会收到这样一个错误：OnOnAttabsDidChange将被忽略，但事件现在正在触发。

Type '{ children: Element[]; ionTabsDidChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<IonTabs> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
  Property 'ionTabsDidChange' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<IonTabs> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'. Did you mean '"onIonTabsDidChange"'?

(alias) const IonTabBar: React.ForwardRefExoticComponent<LocalJSX.IonTabBar & IonicReactProps & {
    onIonTabsDidChange?: (event: CustomEvent<{
        tab: string;
    }>) => void;
    onIonTabsWillChange?: (event: CustomEvent<{
        tab: string;
    }>) => void;
    slot?: "bottom" | "top" | undefined;
    style?: {
        [key: string]: string;
    };
} & Pick<React.HTMLAttributes<...>, "children" | ... 251 more ... | "onTransitionEndCapture"> & React.RefAttributes<...>>
import IonTabBar