Ionic 4 React TypeScript 中如何使用 ion-segment 条件渲染组件

核心实现逻辑 #

通过TypeScript限定分段值的可选范围，绑定状态控制组件的条件渲染即可完成需求，具体实现步骤如下：

1. 定义分段值的联合类型，做静态类型校验

// 限定可选的分段值，避免拼写错误导致的运行异常
type AuthSegmentValue = 'register' | 'login';

2. 导入依赖并声明状态存储当前选中的分段值

import { useState } from 'react';
import { IonHeader, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonContent, IonCard } from '@ionic/react';

// 组件内部声明状态，初始值默认选中注册项
const [currentSegment, setCurrentSegment] = useState<AuthSegmentValue>('register');

3. 定义分段切换事件处理函数，标注正确的事件类型

可选更规范的写法：直接导入Ionic提供的专属事件类型，获得更完整的类型提示

import type { IonSegmentCustomEvent } from '@ionic/react';

const handleSegmentChange = (e: IonSegmentCustomEvent<AuthSegmentValue>) => {
  setCurrentSegment(e.detail.value);
};

4. 条件渲染对应的卡片组件，改造你的原有代码如下：

<IonHeader>
  <IonToolbar>
    <IonSegment value={currentSegment} onIonChange={handleSegmentChange}>
      <IonSegmentButton value="register">
        <IonLabel>Register</IonLabel>
      </IonSegmentButton>
      <IonSegmentButton value="login">
        <IonLabel>Login</IonLabel>
      </IonSegmentButton>
    </IonSegment>
  </IonToolbar>
</IonHeader>
<IonContent>
  {/* 条件渲染注册卡片 */}
  {currentSegment === 'register' && (
    <IonCard>
      点击「Register」分段选项时展示的注册卡片
    </IonCard>
  )}
  {/* 条件渲染登录卡片 */}
  {currentSegment === 'login' && (
    <IonCard>
      点击「Login」分段选项时展示的登录卡片
    </IonCard>
  )}
</IonContent>

关键说明 #

• 用AuthSegmentValue联合类型约束分段值，TS会在编译阶段校验值的合法性，避免非法值传入
• 事件参数不要标注为any，使用规范的类型定义能提前规避取值错误
• 除了用&&做条件渲染，也可以根据业务复杂度选择三元运算符、组件映射表等方式实现展示逻辑

内容的提问来源于stack exchange，提问作者user5410226