Bagaimana untuk Menghantar Props daripada Anak kepada Ibu Bapa dalam React.js?

Menyalurkan Props kepada Komponen Induk dalam React.js

Bolehkah kita menghantar prop kanak-kanak kepada ibu bapanya menggunakan acara dalam React.js?

Walaupun penyelesaian lain wujud, mereka sering terlepas pandang satu titik asas. Ibu bapa sudah memiliki prop yang mereka berikan kepada anak-anak mereka. Jadi, tidak ada keperluan untuk kanak-kanak menghantar semula props tersebut kepada ibu bapa.

Pendekatan Lebih Baik

Kanak-kanak:
Komponen kanak-kanak ialah disimpan ringkas.

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

Ibu bapa (Bujang Kanak-kanak):
Menggunakan prop yang dihantar kepada kanak-kanak, ibu bapa mengendalikan acara klik.

const Parent = ({ childText }) => {
  const handleClick = (event) => {
    // Parent already has the child prop.
    alert(`Child button text: ${childText}`);
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return <Child text={childText} onClick={handleClick} />;
};

Ibu bapa (Senarai Anak):
Ibu bapa menguruskan berbilang anak tanpa kehilangan akses kepada maklumat yang diperlukan.

const Parent = ({ childrenData }) => {
  const handleClick = (childData, event) => {
    alert(
      `Child button data: ${childData.childText} - ${childData.childNumber}`
    );
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData, index) => (
        <Child
          key={index}
          text={childData.childText}
          onClick={e => handleClick(childData, e)}
        />
      ))}
    </div>
  );
};

Strategi ini menghormati pengkapsulan dan mengurangkan gandingan dengan mengelakkan pergantungan pada struktur dalaman anak.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Props daripada Anak kepada Ibu Bapa dalam React.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!