クロージャの受け渡し

Qwik がページ上の他のコンポーネントから独立して各コンポーネントを再開およびレンダリングできるようにするために、props はシリアル化可能でなければなりません。これは、コールバックを子コンポーネントに渡したい場合に問題となります。コールバックは関数であり、関数は直接シリアル化できませんが、最初に QRL に変換することで $() を介してシリアル化できます。

QRL

シリアル化可能な境界を越えて関数を渡すには、QRL を介して行う必要があります。 QRL は、関数のシリアル化された形式です。（詳細については、アドバンストセクションのQRLを参照してください。）

Qwik には $ で終わる便利な API があります。これらは、$() を直接呼び出すことと同等です。これらの 2 行は同等です。

• インライン: useTask$(() => {...}/>
• 明示的: const callbackQrl = $(() => {...}); useTaskQrl(callbackQrl)

ほとんどの場合、コールバックを API に直接インライン化できるため、最初の形式を使用します。しかし、関数が使用される場所と宣言される場所を分離できるようにするために、2 番目の形式を使用する必要がある場合があります。

コールバック props の宣言

コンポーネントは、次の方法で props にコールバックを宣言できます。

• $ で終わるプロパティ (goodbye$ など)
• プロパティの型は QRL<T> で、T は QRL が指す遅延参照型 (関数シグネチャ) です。

interface MyComponentProps {
  goodbye$: QRL<() => void>;
  hello$: QRL<() => void>;
}
 
export const MyComponent = component$((props: MyComponentProps) => { ... });

これにより、<MyComponent> のユーザーは、ここに示されているように goodbye$ 形式を使用できます。

<MyComponent goodbye$={goodbyeQrl} hello$={() => {...}} />

コールバック props の使用

<MyComponent> コンポーネントがコールバック関数を受け取ることに注目してください。

props.goodbye$ を <button> への参照として渡します。

<button onClick$={props.goodbye$}>good bye</button>

<button> 用に新しいコールバックを作成し、内部でコールバック QRL を呼び出します。

<button
  onClick$={async () => {
    await props.hello$?.invoke('World');
  }}
>
  hello
</button>

この形式により、<button> はカスタムパラメーターを使用してコールバックを呼び出すことができます。 QRL は遅延ロードされるため、呼び出しには async と await が必要であることに注意してください。

次へtemplate - 暗黙的なリアクティビティ