Bagaimanakah Komponen Kanak-kanak Boleh Mengemas kini Keadaan Ibu Bapa dalam Bertindak Tanpa Perpustakaan Luaran?

Pengurusan Negeri Ibu Bapa-Anak dalam React

Dalam aplikasi React, anda mungkin menghadapi senario di mana komponen anak perlu mengemas kini keadaan ibu bapa. Walaupun prop tidak boleh diubah secara lalai, terdapat cara untuk mencapai fungsi ini tanpa menggunakan perpustakaan luaran seperti Redux.

Pendekatan Penyelesaian

Untuk komunikasi ibu bapa anak, anda boleh menggunakan fungsi panggil balik yang diluluskan sebagai props daripada ibu bapa kepada anak. Berikut ialah contoh:

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.handler = this.handler.bind(this);
  }

  handler() {
    this.setState({ someVar: 'some value' });
  }

  render() {
    return <Child handler={this.handler} />;
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick={this.props.handler} />;
  }
}

Dalam senario ini:

• Ibu bapa menyerahkan fungsi pengendali sebagai prop kepada Kanak-kanak.
• Apabila butang dalam Kanak-kanak diklik , ia memanggil fungsi pengendali.
• Fungsi pengendali dalam Induk mengemas kini keadaan someVar dalam Induk.

Penyelesaian Alternatif

Jika anda berurusan dengan komponen yang tidak berkaitan (cth., Komponen 5 dan Komponen 3 dalam contoh anda), anda boleh menyusun semula komponen anda:

• Buat komponen tahap lebih tinggi baharu yang mengandungi keadaan untuk kedua-dua komponen (Komponen 1 dan Komponen 3).
• Lepaskan keadaan daripada komponen peringkat tinggi kepada komponen peringkat rendah sebagai prop.

Pendekatan ini membolehkan anda mengurus keadaan antara komponen yang tidak berkaitan dengan berkesan tanpa bergantung pada mekanisme perkongsian keadaan pertengahan.

Atas ialah kandungan terperinci Bagaimanakah Komponen Kanak-kanak Boleh Mengemas kini Keadaan Ibu Bapa dalam Bertindak Tanpa Perpustakaan Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!