Bagaimana untuk menyampaikan prop kanak-kanak kepada ibu bapa dalam React.js?

Menyalurkan Props Anak kepada Ibu Bapa dalam React.js

Konteks

React menyediakan mekanisme komunikasi yang kuat antara komponen ibu bapa dan anak melalui prop. Walau bagaimanapun, mungkin terdapat situasi di mana anda ingin menyerahkan keseluruhan komponen anak bersama-sama propnya kepada ibu bapa. Ini boleh berguna dalam senario di mana anda ingin merangkum logik kompleks dalam kanak-kanak dan menyediakan antara muka yang lebih mudah kepada ibu bapa.

Kebimbangan Berkenaan Hantaran Prop Anak-ke-Ibubapa

Secara sejarah, beberapa pembangun telah mencadangkan menggunakan acara untuk menyampaikan prop kanak-kanak kepada ibu bapa, tetapi pendekatan ini menimbulkan kebimbangan tentang gandingan dan enkapsulasi. Mengakses prop komponen kanak-kanak dan butiran pelaksanaan secara langsung dalam induk boleh menggabungkan komponen dengan ketat dan menghalang usaha pemfaktoran semula.

Pendekatan Disyorkan

Sebaliknya, adalah disyorkan untuk memanfaatkan mekanisme prop induk sedia ada untuk mengakses data kanak-kanak itu. Ini membolehkan ibu bapa menggunakan prop yang diberikannya kepada kanak-kanak, mengelakkan keperluan untuk mengambil prop kanak-kanak dari dalam kanak-kanak itu sendiri.

Pelaksanaan Menggunakan Komponen Kelas

Komponen Kanak-kanak:

class Child extends Component {
  render() {
    return <button onclick="{this.props.onClick}">{this.props.text}</button>;
  }
}

Komponen Induk:

class Parent extends Component {
  getInitialState() {
    return { childText: "Click me! (parent prop)" };
  }

  render() {
    return (
      <child onclick="{this.handleChildClick}" text="{this.state.childText}"></child>
    );
  }

  handleChildClick(event) {
    const childText = this.state.childText;

    // Parent has access to child prop
    alert(`The Child button text is: ${childText}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  }
}

Pelaksanaan Menggunakan Komponen Fungsi

Komponen Anak:

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

Komponen Induk:

const Parent = ({ childrenData }) => {
  const handleChildClick = (childData, event) => {
    const childText = childData.childText;
    const childNumber = childData.childNumber;

    // Parent has access to child prop
    alert(`The Child button data is: ${childText} - ${childNumber}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData) => (
        <child key="{childData.childNumber}" onclick="{(event)"> handleChildClick(childData, event)}
          text={childData.childText}
        />
      ))}
    </child>
</div>
  );
};

Kesimpulan

Dengan menerima mekanisme prop sedia ada dalam React, anda boleh menghantar data dengan berkesan antara induk dan komponen kanak-kanak tanpa memperkenalkan gandingan yang tidak perlu atau melanggar prinsip enkapsulasi. Pendekatan ini memastikan bahawa komponen kekal bebas dan fleksibel, membolehkan kod yang lebih bersih dan boleh diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk menyampaikan prop kanak-kanak kepada ibu bapa dalam React.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!