同じコンポーネント、新しいデータ
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 19/42。
再利用と props を組み合わせると、本質的なパターンが見えてきます。それは、「1つのコンポーネントを、異なるデータで何度もレンダリングする」ということです。
function Badge({ label }) {
return <span>{label}</span>;
}
<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />3つの badge、3つの label、1つの定義。ウェブ上でこれまで目にしてきたすべてのリスト、メニュー、フィード、ギャラリーはこのパターンに従っています（後ほど配列からコピーを生成する方法も学びます）。
チャレンジ
簡単ショップのプロモーション用バッジを完成させて送信します。
Badgeがlabelプロップを受け取り、それを<span>の中にレンダリングするようにします。<div id="badges">の中に、2つのバッジをレンダリングします：最初はNewの label、次にSaleの label です。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。