React: Membangun Antarmuka Pengguna · 3/9

Props: data yang mengalir ke bawah

Input bertype untuk sebuah component, children, dan komposisi alih-alih konfigurasi.

Baca 25 menit

Setelah pelajaran ini kamu bisa

Mengirim data ke sebuah component dan memberinya type
Memakai `children` untuk komposisi
Menjelaskan kenapa props bersifat read-only
Mengutamakan komposisi dibanding daftar flag boolean yang terus bertambah

Props adalah argument sebuah component. Data mengalir satu arah: turun dari parent ke child. Sebuah child tidak bisa mengubah apa yang diberikan padanya.

tsx

interface VenueCardProps {
  name: string;
  pricePerNight: number;
  featured?: boolean;              // optional
  onSelect: (id: number) => void;  // functions are props too
  id: number;
}

function VenueCard({ name, pricePerNight, featured = false, onSelect, id }: VenueCardProps) {
  return (
    <article onClick={() => onSelect(id)}>
      <h3>{name}</h3>
      {featured && <span>Featured</span>}
      <p>{pricePerNight}</p>
    </article>
  );
}

// Used by a parent:
<VenueCard id={42} name="Villa Sunset" pricePerNight={850000} onSelect={handleSelect} />

Destructuring di daftar parameter dengan nilai default untuk featured — JavaScript yang sama yang kamu pelajari di modul 2, mengerjakan hal nyata.

children

children adalah prop khusus yang menampung apa pun yang ditulis di antara tag-nya. Inilah yang membuat component bisa dikomposisi alih-alih dikonfigurasi.

tsx

function Card({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="rounded-xl border p-4">
      <h3>{title}</h3>
      <div>{children}</div>
    </section>
  );
}

// Anything at all can go inside:
<Card title="Booking">
  <p>Three nights</p>
  <VenueCard {...venue} />
  <button>Confirm</button>
</Card>

React.ReactNode adalah type untuk "apa pun yang bisa di-render" — elemen, string, angka, array, null.

Coba sendiri

Komposisi versus konfigurasi, dalam bentuk data. Lihat apa yang terjadi pada masing-masing desain saat ada kebutuhan baru.

// ---------- configuration: every variation becomes a prop ----------
function configurableCard(props) {
  const parts = ["card"];
  if (props.showTitle) parts.push("title:" + props.title);
  if (props.showIcon) parts.push("icon:" + props.icon);
  if (props.showFooter) parts.push("footer:" + props.footerText);
  if (props.showBadge) parts.push("badge:" + props.badgeLabel);
  if (props.showCloseButton) parts.push("close");
  return parts.join(" | ");
}

console.log(configurableCard({
  showTitle: true, title: "Booking",
  showBadge: true, badgeLabel: "New",
  showCloseButton: true,
}));
console.log("5 booleans + 4 strings, and every new variation needs another pair.");
console.log("");

// ---------- composition: the caller assembles the pieces ----------
function card(children) {
  return "card | " + children.filter(Boolean).join(" | ");
}
const title = (text) => "title:" + text;
const badge = (label) => "badge:" + label;
const closeButton = () => "close";
const chart = () => "a-chart-nobody-anticipated";

console.log(card([title("Booking"), badge("New"), closeButton()]));

// A brand-new requirement needs NO change to card():
console.log(card([title("Booking"), chart()]));
console.log("");
console.log("The configurable version would need a showChart prop and a release.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Mengirim elemen sebagai props

tsx

// When you need more than one slot, use named props holding elements.
function Layout({ sidebar, children }: { sidebar: React.ReactNode; children: React.ReactNode }) {
  return (
    <div className="grid grid-cols-[250px_1fr]">
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

<Layout sidebar={<Navigation />}>
  <VenueList venues={venues} />
</Layout>

Proyek ini memakai ide yang sama dengan prop render milik base-ui: <Button render={<Link href="/x" />}> menghasilkan sebuah link yang tampak dan berperilaku seperti button, tanpa menduplikasi keduanya.

Tugas praktik

Di proyek ini, buka features/lesson/block-renderer.tsx. Ia menerima blocks, locale, dan dictionary sebagai props lalu mengirim potongan dictionary-nya ke setiap component block. Lacak satu potongan dictionary — dictionary.runner — dari halaman pelajaran sampai ke tempat string individualnya dibaca. Hitung ia melewati berapa component.

Hasil yang diharapkan

Tiga tingkat, dan itulah prop drilling yang dibahas pelajaran context.