Bagaimana untuk Menyampaikan Props Kanak-Kanak dengan Berkesan kepada Ibu Bapa dalam React.js?

Menyampaikan Props Anak kepada Ibu Bapa dalam React.js

Soalan:

Adakah terdapat cara mudah untuk memindahkan prop kanak-kanak kepada ibu bapanya menggunakan acara dalam React.js?

Menyingkap Pendekatan Yang Salah:

Sesetengah jawapan mencadangkan agar seluruh komponen anak sebagai hujah kepada fungsi induk. Walau bagaimanapun, pendekatan ini bermasalah kerana beberapa sebab:

• Gandingan yang Tidak Diperlukan: Ia menggandingkan ibu bapa dan anak dengan rapat, menjadikannya lebih sukar untuk mengubah suai anak tanpa menjejaskan ibu bapa.
• Kurang Enkapsulasi: Ibu bapa mendedahkan butiran pelaksanaan dalaman anak, melanggar prinsip enkapsulasi.

Cara yang Lebih Baik:

Penyelesaian optimum melibatkan penggunaan prop yang telah disediakan oleh ibu bapa kepada anak. Dengan menghantar data yang diperlukan kepada kanak-kanak melalui prop, ibu bapa boleh mengakses dan memanipulasi data tersebut tanpa bergantung pada mekanisme luaran.

Contoh:

// Child Component
const Child = ({ onClick, text }) => (
  <button onClick={onClick}>{text}</button>
);

// Parent Component
const Parent = () => {
  const handleChildClick = (e) => {
    // Access and use the prop passed to the child
    alert(`The Child button text is: ${e.target.innerText}`);
  };

  return <Child onClick={handleChildClick} text="Click Me" />;
};

Pendekatan ini mengikuti falsafah reka bentuk React dengan mengekalkan sempadan yang jelas antara komponen dan mengelakkan kerumitan yang tidak perlu.

Atas ialah kandungan terperinci Bagaimana untuk Menyampaikan Props Kanak-Kanak dengan Berkesan kepada Ibu Bapa dalam React.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!