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

我正在尝试创建包含多张幻灯片的视图。但是，与按钮上方的标题相反，同一幻灯片上的组件仅在一行上渲染。有人能帮我修一下吗？我的幻灯片代码是：

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>
  );
};

const ExploreContainer:React.FC=（{name}）=>{
返回(
幻灯片1标题
开始
幻灯片2
幻灯片3
);
};

我得到的显示是：

幻灯片1标题
开始

幻灯片1标题
开始

离子组件必须用

正确的幻灯片语法应为：

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

幻灯片1标题
开始

离子组件必须用

正确的幻灯片语法应为：

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

幻灯片1标题
开始

我在这里看不到错误？@AaronSaunders您能解释一下为什么组件呈现为一行而不是下面一行吗？您在谈论什么组件？我认为您需要再看一眼代码，并详细说明您希望看到的内容see@AaronSaunders标题和按钮在同一行上渲染，而不是标题在一行上，然后在其下渲染按钮。这是默认行为吗？我看不出有错误？@AaronSaunders你能解释一下为什么组件呈现为一行而不是一行吗？你说的是什么组件？我认为您需要再看一眼代码，并详细说明您希望看到的内容see@AaronSaunders标题和按钮在同一行上渲染，而不是标题在一行上，然后在其下渲染按钮。这是默认行为吗？仍然在一行上呈现标题和按钮。看起来幻灯片本身并没有展开以填充整个IonContent容器。有没有一种方法可以确保它能自动做到这一点？将它包装在一个仍能在一行上呈现标题和按钮的文件中。看起来幻灯片本身并没有展开以填充整个IonContent容器。有没有一种方法可以确保它能自动做到这一点？用一个