Ionic 6 React工具栏弹出框在DIV容器中超出视口问题求助

问题背景 #

通过$ ionic start happy-meal tabs --type=react创建Ionic 6 React项目，需实现两个目标：

• 在工具栏右侧添加MENU按钮，点击后弹出上下文菜单
• 将应用包裹在指定样式的DIV容器中

目前应用已成功嵌入DIV，但点击MENU按钮后，Popover弹出位置错误，超出容器可视区域。可通过以下代码复现问题：

import {
  IonApp,
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonRow,
  IonTitle,
  IonToolbar,
  setupIonicReact,
  useIonPopover
} from '@ionic/react';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

setupIonicReact();

const Navbar = () => {
  const Popover = () => <IonContent className="ion-padding">Hello World!</IonContent>;
  const [present, dismiss] = useIonPopover(Popover, {
    onDismiss: (data: any, role: string) => dismiss(data, role),
  });
  return (
    <IonHeader>
      <IonToolbar>
        <IonTitle size="large">Happy Meal</IonTitle>
        <IonButtons slot="end">
          <IonButton onClick={
            (e: any) => present({
              event: e,
            })
          }>Menu</IonButton>
        </IonButtons>
      </IonToolbar>
    </IonHeader>
  );
};

const Screen = () => {
  return (
    <IonPage>
      <Navbar />
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Screen</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonRow>
          You are on the main Screen.
        </IonRow>
      </IonContent>
    </IonPage>
  );
};

const App = () =>
  <div style={{ textAlign: 'center' }}>
    <div style={{
      display: 'inline-block',
      margin: '20px auto',
      textAlign: 'left',
      position: 'relative',
      width: '400px',
      height: '750px',
      fontSize: '0.9em',
      border: 'solid 2px #bfbfbf',
    }}>
      <IonApp>
        <Screen />
      </IonApp>
    </div>
  </div>;

export default App;

解决方案 #

问题根源是Ionic Popover默认基于浏览器视口计算位置，而应用被包裹在相对定位的DIV容器中，导致位置计算基准错误。以下两种方法均可解决：

方法一：指定Popover的参考元素与显示位置 #

在调用present方法时，明确传入触发按钮作为参考元素，并设置合适的弹出方向和对齐方式，确保Popover在容器内正确显示：

修改Navbar组件中的按钮点击事件：

<IonButton onClick={(e: any) => present({
  event: e,
  reference: e.currentTarget, // 指定参考元素为当前按钮
  side: 'bottom', // 设置弹出方向为下方
  alignment: 'end' // 设置对齐方式为右侧
})}>Menu</IonButton>

方法二：调整容器的定位属性 #

将包裹IonApp的DIV容器的position从relative改为static，让Popover基于正确的上下文计算位置：

<div style={{
  display: 'inline-block',
  margin: '20px auto',
  textAlign: 'left',
  position: 'static', // 修改为static
  width: '400px',
  height: '750px',
  fontSize: '0.9em',
  border: 'solid 2px #bfbfbf',
}}>

完整修改后的代码（方法一示例） #

import {
  IonApp,
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonRow,
  IonTitle,
  IonToolbar,
  setupIonicReact,
  useIonPopover
} from '@ionic/react';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

setupIonicReact();

const Navbar = () => {
  const Popover = () => <IonContent className="ion-padding">Hello World!</IonContent>;
  const [present, dismiss] = useIonPopover(Popover, {
    onDismiss: (data: any, role: string) => dismiss(data, role),
  });
  return (
    <IonHeader>
      <IonToolbar>
        <IonTitle size="large">Happy Meal</IonTitle>
        <IonButtons slot="end">
          <IonButton onClick={(e: any) => present({
            event: e,
            reference: e.currentTarget,
            side: 'bottom',
            alignment: 'end'
          })}>Menu</IonButton>
        </IonButtons>
      </IonToolbar>
    </IonHeader>
  );
};

const Screen = () => {
  return (
    <IonPage>
      <Navbar />
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Screen</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonRow>
          You are on the main Screen.
        </IonRow>
      </IonContent>
    </IonPage>
  );
};

const App = () =>
  <div style={{ textAlign: 'center' }}>
    <div style={{
      display: 'inline-block',
      margin: '20px auto',
      textAlign: 'left',
      position: 'relative',
      width: '400px',
      height: '750px',
      fontSize: '0.9em',
      border: 'solid 2px #bfbfbf',
    }}>
      <IonApp>
        <Screen />
      </IonApp>
    </div>
  </div>;

export default App;

内容的提问来源于stack exchange，提问作者davidesp