javascript - Ionic 5 Modal 仅显示按钮而没有其他内容 - React

Question

所以我一直在尝试IonModal使用 React 在 Ionic 5 上使用。但是，当在模态框内显示元素时，只会显示按钮。有没有人遇到过这个？澄清一下，当模式打开时，只显示提交和取消按钮，但我希​​望IonInput和也div出现h1。

进口：

import React from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router";
import { checkAuthenticated, load_user } from "./actions/auth";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "./App.css";
import campimg from "./assets/img/campimg.jpeg";
import backpack from "./assets/img/backpack.png";
import { useCurrentLocation, geolocationOptions } from "./actions/spots";
import {
  IonButton,
  IonContent,
  IonInput,
  IonModal,
  IonPage,
} from "@ionic/react";

  const [showModal, setShowModal] = React.useState(false);

 <IonPage>
      <IonContent>
        <IonModal isOpen={showModal}>
          <div>
            <h1>Hello User! You can enter data here:</h1>
          </div>
          <IonInput placeholder="Title"></IonInput>
          <IonButton shape="round" class="button_primary_white_text">
            Submit
          </IonButton>
          <IonButton
            shape="round"
            class="button_secondary_white_text"
            onClick={() => setShowModal(false)}
          >
            Cancel
          </IonButton>
        </IonModal>
        <h1>Hello {name["first_name"]}!</h1>
        <IonButton
          shape="round"
          class="button_secondary_white_text"
          onClick={() => setShowModal(true)}
        >
          Add Spot
        </IonButton>
      </IonContent>
   </IonPage>

标签： javascriptreactjsionic-frameworkionic5