你如何在 Ionic 4 中有条件地显示带有离子段的组件 - React

问题描述

我想要一个注册/登录组件，可以使用 ion-segment 在它们之间切换。使用 ReactJS 很简单，但我不知道如何使用 React 的 TypeScript 版本。你如何有条件地用离子段显示不同的组件？

提前致谢！

        <IonToolbar>
        <IonSegment value ="register"  onIonChange={(e) => handleSegmentChange(e)}>
            <IonSegmentButton value="register">
                    <IonLabel>Register</IonLabel>
            </IonSegmentButton>
            <IonSegmentButton value="login">
                    <IonLabel>Login</IonLabel>
            </IonSegmentButton>
        </IonSegment>
    </IonToolbar>
    </IonHeader>
    <IonContent>
        <IonCard>
            Register card that appears when I click the "Register" segment
        </IonCard>
        <IonCard>
            Login card  that appears when I click the "Login" segment
        </IonCard>
    </IonContent>

这就是我想要完成的。

解决方法

找出下面的解决方案。对我来说工作正常。

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

const Segments = () => {
  const [registerActive,setRegisterActive] = useState<boolean>(true);
  const [loginActive,setLoginActive] = useState<boolean>(false);
  

  return (
    <React.Fragment>
      <IonPage className="ion-page" id="main-content">
        <IonHeader>
          <IonToolbar>
            <IonSegment  value={registerActive ? "register" : "login"}>
              <IonSegmentButton
                value="register"
                onClick={() => {
                  setLoginActive(false);
                  setRegisterActive(true);
                }}
              >
                <IonLabel>Register</IonLabel>
              </IonSegmentButton>
              <IonSegmentButton
                value="login"
                onClick={() => {
                  setRegisterActive(false);
                  setLoginActive(true);
                }}
              >
                <IonLabel>Login</IonLabel>
              </IonSegmentButton>
            </IonSegment>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">
          {registerActive ? (
            <IonCard>
              Register card that appears when I click the "Register" segment
            </IonCard>
          ) : (
            <IonCard>
              Login card that appears when I click the "Login" segment
            </IonCard>
          )}
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};

export default Segments;

希望对你有帮助！