Ionic Reactjs解析错误。当渲染基于选择框的元素时,期望表达式。

我有一个选择元素,有两个选项,分别是 ExaminationConsultation. 如果用户选择 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>
  );
};

Ionic与react似乎在声明道具和状态方面有所不同。谁能告诉我这是什么问题,我应该怎么做?谢谢。

解决方案:

在jsx中内联这个条件。

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

文档: 条件渲染

给TA打赏
共{{data.count}}人
人已打赏
未分类

从控制器到视图的成功信息

2022-9-14 11:22:20

未分类

python kivy请求导入错误,ı有buılozer.spec。

2022-9-14 11:22:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索