Ionic React点击按钮调用外部文件IonPopover组件渲染失败

尝试通过按钮点击操作，从外部文件showPopUp.tsx中加载IonPopover组件。在onClick()事件中编写了加载外部IonPopover组件的逻辑：目前外部ShowPopup()函数可被成功调用，if判断条件也能正常通过，但函数返回的IonPopover组件无法正常渲染。

ListUserTask.tsx #

import ShowPopup from "./showPopup";

<IonButton
    fill="outline"
    slot="end" 
    onClick={() => ShowPopup(true)}
>
    Details
</IonButton>

showPopUp.tsx #

import { IonButton, IonPopover } from "@ionic/react";
import React from "react";

function ShowPopup(props: any): JSX.Element {
    if (props) {
        console.log("INSIDE");
        return (
            <div className="showpopup">
                <IonPopover className="popup">
                    showPopup
                    <IonButton className="close-btn">Schliessen</IonButton>
                    {props.children}
                </IonPopover>
            </div>
        );
    } else {
        throw new Error("TRIGGER FALSE");
    }
}
export default ShowPopup;

在onClick事件回调中直接调用函数组件返回JSX的写法，返回的JSX没有被加入React渲染树，React不会对这部分内容做渲染处理。React组件只有作为组件渲染输出的一部分被引用时，才会被解析挂载到页面，事件回调中调用组件拿到的只是普通JS对象，不会产生实际渲染效果。
另外当前IonPopover没有绑定isOpen受控属性，本身也无法触发展示逻辑。

• 用状态控制弹窗显隐，将弹窗组件放入页面的JSX渲染树中，不要在事件回调里直接调用组件返回JSX。
  修改后的ListUserTask.tsx代码：

  import { useState } from "react";
  import { IonButton } from "@ionic/react";
  import ShowPopup from "./showPopup";
  
  // 在ListUserTask组件内部定义显隐状态
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  
  // 按钮逻辑修改
  <IonButton
      fill="outline"
      slot="end" 
      onClick={() => setIsPopoverOpen(true)}
  >
      Details
  </IonButton>
  
  {/* 将弹窗组件放到渲染树中，传入显隐状态和关闭方法 */}
  <ShowPopup 
      isOpen={isPopoverOpen}
      onClose={() => setIsPopoverOpen(false)}
  />
  

• 调整showPopUp.tsx逻辑，对接IonPopover的受控显隐属性，移除无效的条件判断抛错逻辑，给关闭按钮绑定关闭事件。
  修改后的showPopUp.tsx代码：

  import { IonButton, IonPopover } from "@ionic/react";
  import React from "react";
  
  interface ShowPopupProps {
      isOpen: boolean;
      onClose: () => void;
      children?: React.ReactNode;
  }
  
  function ShowPopup({ isOpen, onClose, children }: ShowPopupProps): JSX.Element {
      return (
          <div className="showpopup">
              <IonPopover 
                  className="popup"
                  isOpen={isOpen}
                  onDidDismiss={onClose}
              >
                  showPopup
                  <IonButton className="close-btn" onClick={onClose}>Schliessen</IonButton>
                  {children}
              </IonPopover>
          </div>
      );
  }
  export default ShowPopup;
  

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