Menggandakan dan Menyisipkan Props dengan cloneElement

Selamat Datang

Apa Itu cloneElement

const clone = React.cloneElement(child, { active: true });

Mengapa Menggunakan cloneElement

Contoh Bilah Tab

function Tabs({ children, activeIndex, onChange }) {
  return (
    <div className="tabs">
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          isActive: i === activeIndex,
          onClick: () => onChange(i),
        })
      )}
    </div>
  );
}

Aturan Penggabungan Props

Menggabungkan Penangan Peristiwa

React.cloneElement(child, {
  onClick: (e) => {
    child.props.onClick?.(e); // original handler
    handleClick(e);           // injected handler
  },
})

Mengganti Anak

// Replace children with wrapped version
React.cloneElement(child, {}, <strong>{child.props.children}</strong>)

Memeriksa Tipe Elemen Sebelum Mengkloning

if (React.isValidElement(child)) {
  return React.cloneElement(child, extraProps);
}
return child;

cloneElement vs Context

Alternatif Modern: Properti Perenderan dan Hook

Pemeriksaan Singkat

Ringkasan

Kursus Selesai