離子 Reactjs 解析錯誤：基於 Select 框渲染元素時預期的表達式

Question

我有一個 select 元素，有 2 個選項，即Examination和Consultation 。 如果用戶選擇Consultation ，我想呈現一個時間選擇器元素。 但是如果用戶選擇Examination就不會渲染特定的元素。 我嘗試在 return 中做一個條件語句，但出了點問題。

const Tab2: React.FC = () => {
  const [schedType, setschedType] = useState('');
  const [selectedDate, setSelectedDate] = useState('');

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Book Schedule</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
      <IonItem>
        <IonLabel>Select Appointment</IonLabel>
        <IonSelect onIonChange={e => setschedType(e.detail.value!)}>
          <IonSelectOption value="Consultation">Consultation</IonSelectOption>
          <IonSelectOption value="Examination">Examination</IonSelectOption>
        </IonSelect>
      </IonItem>
        <IonItem>
          <IonLabel>Select Date</IonLabel>
          <IonDatetime displayFormat="MMM D" min="2015" max="2030" value={selectedDate} 
          onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
      </IonItem>

      if(schedType == "Consultation"){
       return(
        <IonItem>
          <IonLabel>Time</IonLabel>
          <IonDatetime
            hourValues='1,2,3,4,5,7,8'
            displayFormat="hh:mm A"
            minuteValues="0,30"
            value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}
          ></IonDatetime>
        </IonItem>
          )
        }

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

帶有反應的離子在聲明道具和 state 方面似乎有所不同。 有人可以告訴我這有什么問題，我該怎么辦？ 謝謝。

Answer 1

在 jsx 中內聯這個條件：

{schedType === "Consultation" && (
  <IonItem>
    ...
  </IonItem>
)}

文檔： 條件渲染