Bagaimana untuk Menyalurkan Props daripada Anak kepada Komponen Induk dalam React.js Tanpa Melepasi Keseluruhan Kanak-Kanak Kembali?

Cara Menghantar Props daripada Anak kepada Komponen Induk dalam React.js Menggunakan Acara

Dalam React.js, terdapat pelbagai pendekatan untuk menghantar data daripada komponen anak kepada induknya. Walaupun pengendali acara selalunya mudah, adalah penting untuk memahami amalan terbaik dan kemungkinan perangkap.

Mengapa Kami Tidak Melepaskan Komponen Keseluruhan Kanak-kanak Kembali

Penyelesaian lain untuk masalah ini mungkin mencadangkan menyerahkan keseluruhan komponen anak kembali kepada ibu bapa melalui pengendali acara. Walau bagaimanapun, pendekatan ini secara amnya tidak disyorkan kerana:

• Penduaan Props: Ibu bapa sudah mempunyai prop yang diserahkan kepada anak, jadi tidak perlu menyerahkannya kembali.
• Gandingan dan Enkapsulasi: Gandingan ketat ibu bapa dan anak dengan cara ini boleh membawa kepada isu penyelenggaraan dan pemfaktoran semula.

Pelaksanaan yang Lebih Baik

Sebaliknya, anda harus menggunakan fakta bahawa ibu bapa sudah mempunyai prop yang dimiliki oleh anak keperluan.

Anak:

var Child = React.createClass({
  render: function() {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

Ibu bapa (Anak Tunggal):

var Parent = React.createClass({
  getInitialState: function() {
    return { childText: "Click me! (parent prop)" };
  },
  render: function() {
    return <Child onClick={this.handleChildClick} text={this.state.childText} />;
  },
  handleChildClick: function(event) {
    // Access the props passed to the child
    alert("The Child button text is: " + this.state.childText);
    // Access the click target
    alert("The Child HTML is: " + event.target.outerHTML);
  },
});

Ibu bapa (Berbilang Kanak-kanak):

var Parent = React.createClass({
  getInitialState: function() {
    return {
      childrenData: [
        { childText: "Click me 1!", childNumber: 1 },
        { childText: "Click me 2!", childNumber: 2 },
      ],
    };
  },
  render: function() {
    const children = this.state.childrenData.map(
      (childData, childIndex) => {
        return (
          <Child
            onClick={this.handleChildClick.bind(null, childData)}
            text={childData.childText}
            key={childIndex}  // Added key for each child component
          />
        );
      }
    );
    return <div>{children}</div>;
  },
  handleChildClick: function(childData, event) {
    alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
    alert("The Child HTML is: " + event.target.outerHTML);
  },
});

Dalam contoh ini, ibu bapa mempunyai akses kepada prop dan klik sasaran komponen kanak-kanak tanpa perlu mengembalikan keseluruhan kanak-kanak itu.

Kemas Kini ES6

Untuk sintaks ES6, kod itu akan nampak macam ini:

Anak:

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

Ibu bapa (Anak Tunggal):

class Parent extends React.Component {
  state = { childText: "Click me! (parent prop)" };
  handleChildClick = (event) => {
    alert("The Child button text is: " + this.state.childText);
    alert("The Child HTML is: " + event.target.outerHTML);
  };
  render() {
    return <Child onClick={this.handleChildClick} text={this.state.childText} />;
  }
}

Ibu bapa (Berbilang Kanak-kanak):

class Parent extends React.Component {
  state = {
    childrenData: [
      { childText: "Click me 1!", childNumber: 1 },
      { childText: "Click me 2!", childNumber: 2 },
    ],
  };
  handleChildClick = (childData, event) => {
    alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
    alert("The Child HTML is: " + event.target.outerHTML);
  };
  render() {
    const children = this.state.childrenData.map((childData, childIndex) => (
      <Child key={childIndex} text={childData.childText} onClick={(e) => this.handleChildClick(childData, e)} />
    ));
    return <div>{children}</div>;
  }
}

Penyelesaian ini membolehkan penyelesaian yang lebih baik pengkapsulan dan penyelenggaraan sambil memberikan fleksibiliti dalam menyampaikan maklumat yang diperlukan daripada kanak-kanak kepada komponen induk.

Atas ialah kandungan terperinci Bagaimana untuk Menyalurkan Props daripada Anak kepada Komponen Induk dalam React.js Tanpa Melepasi Keseluruhan Kanak-Kanak Kembali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!