如何根据激活的IonSegmentButton显示对应卡片？React实现方案

完全可以用useState来实现类似Angular的*ngSwitchCase功能，核心思路是通过状态管理当前激活的Segment值，再根据这个值控制对应内容的显示/隐藏。具体实现步骤如下：

1. 导入useState钩子 #

首先需要从React中导入useState，用来管理当前选中的Segment值。

2. 声明状态变量 #

在组件内部添加状态变量，初始值设为默认激活的Segment值（这里是"1"）：

const [activeSegment, setActiveSegment] = useState("1");

3. 绑定Segment的切换事件 #

给IonSegment添加onIonChange事件，当用户切换Segment时更新状态：

<IonSegment value={activeSegment} color="primary" mode="md" onIonChange={(e) => setActiveSegment(e.detail.value!)}>

4. 条件渲染对应内容 #

对每个卡片使用条件渲染，只有当activeSegment的值与卡片对应的Segment值匹配时，才渲染该卡片。

完整修改后的代码 #

import { useState } from 'react';
import { IonCard, IonCardHeader, IonContent, IonPage, IonSegment, IonSegmentButton } from '@ionic/react';
import './example.css';

const Example: React.FC = () => {
  // 管理当前激活的Segment值
  const [activeSegment, setActiveSegment] = useState("1");

  return (
    <IonPage>
      <IonContent fullscreen className="ion-padding">
        <div>
          <IonSegment 
            value={activeSegment} 
            color="primary" 
            mode="md"
            onIonChange={(e) => setActiveSegment(e.detail.value!)}
          >    
            <IonSegmentButton value="1">
                Segment 1
            </IonSegmentButton>
            <IonSegmentButton value="2">
                Segment 2
            </IonSegmentButton>
            <IonSegmentButton value="3">
                Segment 3
            </IonSegmentButton>
          </IonSegment>

          <div>   
            {/* Segment 1 Content - 仅当activeSegment为"1"时显示 */}
            {activeSegment === "1" && (
              <IonCard className="ion-no-margin ion-padding-bottom">
                <IonCardHeader>
                    1
                </IonCardHeader>
              </IonCard>
            )}

            {/* Segment 2 Content - 仅当activeSegment为"2"时显示 */}
            {activeSegment === "2" && (
              <IonCard className="ion-no-margin ion-padding-bottom">
                <IonCardHeader>
                    2
                </IonCardHeader>
              </IonCard>
            )}

            {/* Segment 3 Content - 仅当activeSegment为"3"时显示 */}
            {activeSegment === "3" && (
              <IonCard className="ion-no-margin ion-padding-bottom">
                <IonCardHeader>
                    3
                </IonCardHeader>
              </IonCard>
            )}
          </div>

        </div>
      </IonContent>
        
    </IonPage>
  );
};

export default Example;

实现逻辑说明 #

• useState负责跟踪当前选中的Segment值，初始状态为默认激活的"1"；
• IonSegment的onIonChange事件会在用户切换Segment时触发，将选中的Segment值更新到状态中；
• 通过{activeSegment === "X" && <组件>}的条件渲染语法，只渲染与当前激活Segment匹配的卡片，这就实现了和Angular*ngSwitchCase完全一致的效果。

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