如何在 Qwik JS 中将函数作为 props 传递？

Question

问题

\n

在 React 中，当函数需要访问上述子组件的父组件中的状态时，我们可以将函数作为 props 传递到子组件中。我正在为需要实现此类行为的应用程序编写代码。但是，我无法找到在 Qwik 中定义函数的正确约定，然后发送它们。

\n

试图

\n

我尝试在界面中定义该函数，看看这是否有助于 Qwik 允许此实现，但到目前为止这也不起作用。

\n

代码

\n

我正在尝试从应用程序标题中包含的图标启动模式。我试图通过使用标头组件中声明的商店来控制模式的显示。它是一个布尔值，决定是否显示模式。我定义了用于修改标头组件中状态的函数，并尝试将其传递到我的模态子组件中。

\n

// components/header/header.tsx\nimport { component$, useClientEffect$, useStore } from "@builder.io/qwik";\nimport { strictEqual } from "assert";\nimport Modal from "../modal/modal";\n\nexport default component$(() => {\n    const store = useStore({\n        ...\n        modal: false\n    });\n\n    function onClose() {\n        store.modal = false;\n    }\n\n    return (\n        <header>\n            {store.modal && <Modal onClose={onClose}/>}\n            <div \n                onClick$={()=>{\n                    store.modal = true;\n                }}\n            >\n                <i class="fa-solid fa-cart-shopping"></i>\n            </div>\n        </header>\n    );\n});\n

\n

在我的模态组件中，我尝试使用一个界面来指示我正在将一个函数传递到我的 props 中，并尝试将其设置为在子组件中包含的另一个图标中执行的函数。

\n

// components/modal/modal.tsx\nimport { component$ } from "@builder.io/qwik";\nimport { strictEqual } from "assert";\n\ninterface ModalProps {\n    onClose: () => void\n}\n\nexport default component$((props: ModalProps) => {\n    return (\n        <div>\n            <div>\n                <h1>Modal</h1>\n                <i onClick$={props.onClose}></i>\n            </div>\n        </div>\n    );\n});\n\n

\n

错误信息

\n

当我单击标题中的图标时，它在我的终端中显示以下错误。

\n

log.js:10 QWIK ERROR Error: Code(3): Only primitive and object literals can be serialized at Array.flatMap (<anonymous>) \xc6\x92 onClose() { store.modal = false; }

\n

结论

\n

无论如何，是否可以将函数作为 props 发送到 Qwik JS 中的子组件中？

\n

如果没有，我可以从子组件中访问父组件中包含的存储吗？

\n

基本上，解决这个问题的理想方法是什么？

\n

Answer 1

由于我和你一样是这个框架的菜鸟，所以我也很难理解它是如何工作的。

您实际上需要通过 QRL，您可以在此处阅读：

https://qwik.builder.io/docs/components/events/

因此，以下是修改 Modal 组件代码的方法：

import { component$, QRL } from '@builder.io/qwik';

interface ModalProps {
    onClose: QRL<() => void>;
}

export default component$<ModalProps>(props => {
    return (
        <div>
            <div>
                <h1>Modal</h1>
                <i onClick$={props.onClose}></i>
            </div>
        </div>
    );
});

还有你的头部组件：

import { $, component$, useStore } from '@builder.io/qwik';

import Modal from '../components/test';

export default component$(() => {
    const store = useStore({
        modal: false
    });

    const onClose = $(() => {
        store.modal = false;
    });

    return (
        <header>
            {store.modal && <Modal onClose={onClose} />}
            <div
                onClick$={() => {
                    store.modal = true;
                }}
            >
                <i class="fa-solid fa-cart-shopping"></i>
            </div>
        </header>
    );
});