Komponen yang Sama, Data Baru
Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 19 dari 42.
Gabungkan penggunaan ulang dan props, lalu kamu mendapatkan pola yang sesungguhnya: satu komponen, dirender berkali-kali dengan data yang berbeda.
function Badge({ label }) {
return <span>{label}</span>;
}
<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />Tiga lencana, tiga label, satu definisi. Setiap list, menu, feed, dan galeri yang pernah kamu lihat di web mengikuti pola ini. Nanti, kita bahkan akan membuat salinannya dari sebuah array.
Tantangan
MudahBuat badge promosi toko.
- Buat
Badgemenerima proplabeldan merendernya di dalam<span>. - Di dalam
<div id="badges">, render dua badge: pertama dengan labelNew, lalu dengan labelSale.
Coba sendiri
<!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>
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar
1Mengenal React
Apa Itu React?Komponen PertamamuAturan Satu IndukJSX Bukan HTMLRangkuman: Mengenal React4Props
Apa Itu Props?Meneruskan PropsDua PropsKomponen yang Sama, Data BaruProp ChildrenRingkasan: Props