从Antoher文件加载离子popopover onclick

发布于 2025-02-13 03:01:45 字数 1337 浏览 0 评论 0原文

我正在尝试通过外部文件“ ShowPopup.tsx”加载组件“ IonPopover”。

这是一条线，即IM试图通过“ 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;

原文

i´m trying to load the Component "IonPopover" via Button-click from the external file "showPopUp.tsx".

This is the line, where im trying to load the external Component "IonPopover" via "onClick()". The external "ShowPopup()" function is called successfully so far and also the if-condition gets passed, but the return of the Component "IonPopover" its not working.
Hope someone can help me.

file: ListUserTask.tsx

import ShowPopup from "./showPopup";


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

file: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;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ㄟ。诗瑗 2025-02-20 03:01:45

我不确定React，但是在Angular中，我们使用

router.navigate(["your page route for popup"],state: {variableName: value});

此variablename可以作为true/false分配一个值，然后在其他文件中，您可以提供一个条件，即当variablename true时，弹出窗口会打开。

I'm not sure about react but in Angular, we use

router.navigate(["your page route for popup"],state: {variableName: value});

This variableName can be assigned a value as true/false and then in other file, you can give a condition that popover opens when variableName is true.

回复收藏 0 原文

~没有更多了~