javascript - Ionic Reactjs 解析错误：基于选择框渲染元素时需要表达式

Question

我有一个带有 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>
  );
};

带有反应的离子在声明道具和状态方面似乎有所不同。有人可以告诉我这有什么问题，我该怎么办？谢谢。

标签： javascriptreactjsionic-frameworkreact-hooks

Answer 1

在 jsx 中内联这个条件：

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

文档：条件渲染