childrenの型
中身を差し込める部品
fleama には、枠だけ同じで中身が違う場所がいくつもあります。商品カードも、カートの明細も、マイページの箱も、白い枠に影が付いた同じ見た目です。
こういうときは、枠を部品にして中身を外から差し込みます。差し込まれたものは children に届きます。
<Card>
<p>スニーカー</p>
</Card>Card から見ると、<p>スニーカー</p> が children です。
ReactNode で受け取る
children の型は ReactNode です。
import type { ReactNode } from "react";
type CardProps = {
children: ReactNode;
};
function Card({ children }: CardProps) {
return <div className="card">{children}</div>;
}ReactNode は「画面に出せるもの全部」を指します。JSX でも、文字でも、数値でも、配列でも受け取れます。「なんでも入る型」に見えますが、関数やオブジェクトのような画面に出せないものは弾かれます。そこが any との違いです。
見出しも一緒に受け取る
枠に見出しを付けたいときは、children と並べて普通の props にします。
type CardProps = {
title: string;
children: ReactNode;
};
function Card({ title, children }: CardProps) {
return (
<div className="card">
<h2 className="card-title">{title}</h2>
{children}
</div>
);
}呼ぶ側はこうなります。
<Card title="スニーカー">
<p>4800 円</p>
</Card>属性で渡すものと、タグの中に書くもの。1行で済むものは属性、まとまりのある中身は children、と分けるときれいになります。
演習
fleama の枠部品 Card を TypeScript にします。