基本的なプロジェクション
プロジェクションは、子コンポーネントにコンテンツを渡し、子コンポーネントがコンテンツのレンダリング場所を制御する方法です。プロジェクションは、親コンポーネントと子コンポーネント間の協調作業です。親コンポーネントはレンダリングする必要があるコンテンツを決定し、子コンポーネントはコンテンツをレンダリングする場所と、レンダリングするかどうかを決定します。
この例では、<App> 内の <Panel> 要素のコンテンツが、プロジェクションする必要があるコンテンツです。<Panel> コンポーネントは、コンテンツを <div> タグでラップし、<Slot> 要素を使用してプロジェクションする必要があります。
なぜ<Slot>を使うのか？
Qwik が children プロパティではなく <Slot> を使用する理由は何ですか？<Slot> の使用は、コンポーネントを順番に関係なくレンダリングできるようにするための戦略的な選択です。（つまり、親コンポーネントがまだ再開されていなくても、コンポーネントを再レンダリングできる必要があります。）Qwik で children を使用する際には、2 つの問題があります。
- Qwik がプロジェクションに
childrenプロパティを使用するには、Qwik のコンポーネント間で渡される他のすべての値と同様に、シリアライズ可能である必要があります。 - 子コンポーネントは、レンダリングツリーに挿入する前に
childrenの内容を変更する可能性があります。これは、親コンポーネントが子コンポーネントとは独立してレンダリングされるのを防ぎます。子コンポーネントがchildrenを変更する場合は、親コンポーネントがchildrenの値を更新するたびに、その変更を行う必要があります。
Qwik では、コンテンツとプロジェクションの場所を宣言的に制御できるため、<Slot> アプローチの方が適しています。これにより、親コンポーネントはプロジェクションコンテンツを変更でき、子コンポーネントを再レンダリングする必要がなくなります。
例
<Slot> 要素を使用して <App> コンテンツをプロジェクションするように <Panel> コンポーネントを変更します。
ボタンクリック時に <App> と <Panel> の両方が再レンダリングされないことに注意してください。これは、リアクティビティグラフがサーバーで構築され、HTML にシリアライズされるため、Qwik は <App> と <Panel> のテンプレートをダウンロードして再レンダリングする必要なく、更新する必要があるものを認識できるためです。