• • 问题**

在React中，当函数需要访问上述子组件的父组件中的状态时，我们可以将函数作为 prop 传递给子组件。我正在为一个应用程序编写代码，我需要实现这样的行为。然而，我在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>
    );
});

• • 错误消息**

当我点击标题中的图标时，它在我的终端中显示以下错误。
第一个月

• • 结论**

在QwikJS中有没有把函数作为 prop 发送到子组件中？
如果没有，我可以从子组件中访问父组件中包含的存储吗？
基本上，解决这个问题的理想方法是什么？