Meneruskan Props
Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 17 dari 42.
Mari hubungkan prop dari awal hingga akhir. Tiga langkah, selalu sama:
// 1. terima nilainya
function Greeting({ name }) {
// 2. gunakan nilainya
return <p>Hello, {name}!</p>;
}
// 3. teruskan nilainya
<Greeting name="Ada" />String ditulis di dalam tanda kutip. Angka dan ekspresi menggunakan kurung kurawal, sama seperti aturan pada atribut:
<Score points={97} />
Tantangan
PemulaKomponen Greeting mengabaikan semua yang kamu berikan.
- Buat
Greetingmenerima propnamedan menampilkanHello, {name}!di paragrafnya. - Di App, berikan
name="Ada"agar halaman menampilkanHello, Ada!.
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