境界をまたぐ合成
サーバーで取って、ブラウザに渡す
サーバー側の部品は、商品データを読むところまでできます。クライアント側の部品は、押されたことに反応できます。この2つをつなぐのが props です。
TypeScript (JSX)
export default function ItemRow({ item }: { item: Item }) {
return (
<li>
<p>{item.title}</p>
<AddToCart title={item.title} />
</li>
);
}ItemRow はサーバーで動き、AddToCart はクライアントで動きます。境界をまたいで値が渡っているように見えますが、書き方は今までの props と1文字も変わりません。
渡せるものと渡せないもの
サーバーからクライアントへ渡せるのは、そのまま文字にできるものだけです。文字列、数値、真偽値、配列、素のオブジェクトは渡せます。渡せないのは関数です。サーバーで作った関数はブラウザには存在しないので、props に入れても届きません。
TypeScript (JSX)
<AddToCart onDone={() => save()} />これはエラーになります。押されたときの処理は、クライアント側の部品の中に書きます。
children なら向きが逆でもよい
クライアント部品は、サーバー部品を import できません。import した時点で、その相手もブラウザ側に引きずり込まれるからです。それでも、クライアント部品の中にサーバー部品を置きたいことはあります。
そのときは children を使います。
TypeScript (JSX)
<ClientPanel>
<ServerItemList />
</ClientPanel>ClientPanel は中身が何かを知らないまま、受け取ったものを並べるだけです。ServerItemList はサーバーで組み立てられ、出来上がったものが渡されます。import は境界を越えないが、children は越えると覚えておくと迷いません。
演習
サーバーで読んだ商品名を、クライアント部品に props で渡します。