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

Question

问题

在React中，当一个函数需要访问上述子组件的父组件中的状态时，我们可以将函数作为props传递到子组件中。我正在编写一个应用程序的代码，需要实现这样的行为。然而，我在寻找在Qwik中定义函数并将其传递的正确约定方面遇到了困难。

尝试

我尝试在我的接口中定义函数，以查看是否有助于Qwik允许此实现，但迄今为止也没有起作用。

代码

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

// components/header/header.tsx
import { component$, useClientEffect$, useStore } from "@builder.io/qwik";
import { strictEqual } from "assert";
import Modal from "../modal/modal";

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

    function 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>
    );
});

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

// components/modal/modal.tsx
import { component$ } from "@builder.io/qwik";
import { strictEqual } from "assert";

interface ModalProps {
    onClose: () => void
}

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

错误信息

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

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

结论

在Qwik JS中有没有办法将函数作为props传递到子组件中？

如果不行，我能否从子组件中访问包含在父组件中的存储？

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

- Muhtasim Fuad Showmik

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>
    );
});

- Valerio

---

非常感谢！这对我很有帮助。由于当时我第一次阅读它时不太清楚为什么需要这样做，所以文档中的这部分内容已经从我的记忆中溜走了。 - Muhtasim Fuad Showmik

Answer 2

import type { PropFunction } from '@builder.io/qwik';
import { component$ } from '@builder.io/qwik';
import type { Signup } from '~/routes/login';

export const ButtonDefault = component$((props: { name: string, link?: string, signup?: Signup, setSignUpState$?: PropFunction<(signup: Signup) => void> }) => {
  
  return (
    <button onClick$={()=>{if(props.setSignUpState$ && props.signup){props.setSignUpState$(props.signup)}}} class="dark:darker-light dark:hover:lighter-light lighter-dark hover:darker-dark font-bold py-2 px-4 rounded" type="button">
      {props.name}
    </button>
  );
});

我可以将函数作为属性传递给我的模板，如下所示。

export type Signup = { signup: boolean };
const signup = useSignal<Signup>({ signup: false });
<ButtonDefault name={'Login'} signup={signup.value}  setSignUpState$={(signup: Signup) => { signup.signup = false;}} />

- noiissyboy

Answer 3

对我来说，我正在使用PropFunction类型来定义函数prop。例如

import { type PropFunction } from "@builder.io/qwik";

这是一个完整的示例，展示了我如何将 onClick$ 事件作为属性传递。

import { component$, type PropFunction } from "@builder.io/qwik";

interface Props {
  onClick$?: PropFunction<() => void>;
}

export const Button = component$((props: Props) => {
  return <button onClick$={props.onClick$}>Click me!</button>;
});

- Anas