reactjs - 离子幻灯片反应内容都在一条线上

Question

我正在尝试使用多张幻灯片创建视图。但是，同一张幻灯片上的组件仅在一行上呈现，而不是按钮上方的标题。有人可以帮我解决这个问题吗？我的幻灯片代码是：

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
  return (
    <IonContent>
      <IonSlides pager={true} options={slideOpts}>
        <IonSlide>
          <IonTitle size="large"> Slide 1 Title</IonTitle>
          <IonButton color="primary">Get Started</IonButton>
        </IonSlide>
        <IonSlide>
            <h1>Slide 2</h1>
        </IonSlide>
        <IonSlide>
            <h1>Slide 3</h1>
        </IonSlide>
      </IonSlides>
    </IonContent>
  );
};

我得到的显示是：

Answer 1

离子成分必须包裹在一个<div>

正确的幻灯片语法应为：

   <IonSlide>
      <div><IonTitle size="large"> Slide 1 Title</IonTitle></div>
      <IonButton color="primary">Get Started</IonButton>
    </IonSlide>

Answer 2

<IonSlide>
   <IonToolbar>
      <IonTitle size="large"> Slide 1 Title</IonTitle>
   </IonToolbar>
   <IonButton color="primary">Get Started</IonButton>
</IonSlide>