propsで使い回す——「型と差分」の完成形

前の章で、UserCardに違うデータを流しました。この章では、それを実戦のカードUIでやります。新しい文法はほぼ出てきません。かわりに、HTML/CSS教材から続いてきたひとつの考え方に決着をつけます。

「型と差分」

HTML/CSS教材のチャプター14で、こういう話をしました——ボタンには「型」(共通の見た目)と「差分」(ラベルや色)がある。btnクラスで型を作り、btn-primaryで差分を出しましたね。あのときの型はCSSクラスで、差分もCSSクラスでした。

Reactではこうなります。型=コンポーネント、差分=props。

type ProductCardProps = {
  title: string;
  price: number;
  tag: string;
};

const ProductCard = ({ title, price, tag }: ProductCardProps) => {
  return (
    <div className="product-card">
      <span className="tag">{tag}</span>
      <h3>{title}</h3>
      <p className="price">¥{price}</p>
    </div>
  );
};