Ionic Slide React 内容全部在一行中

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

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

Answer 2

离子组件必须包裹在<div>

正确的幻灯片语法应为：

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

Ionic Slide React 内容全部在一行中

Ionic Slide React Content Is All On One Line

reactjs

ionic-framework

ion-slides