Bagaimana untuk Mengemas kini Keadaan Komponen Induk daripada Komponen Anak dalam React?

Meluluskan Kemas Kini Negeri Induk melalui Fungsi Panggilan Balik dalam React

Apabila bekerja dengan komponen React bersarang, ia mungkin menjadi perlu untuk mengemas kini keadaan sesuatu komponen induk dari dalam komponen anak. Memandangkan prop tidak boleh diubah, memberikan nilai secara langsung kepada mereka tidak boleh dilaksanakan.

Dalam senario sedemikian, pendekatan alternatif melibatkan penghantaran fungsi kepada komponen anak yang membolehkannya mengemas kini keadaan induk. Ini boleh dicapai seperti berikut:

// Parent Component
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} />;
  }
}

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

Melalui mekanisme ini, komponen anak boleh menggunakan fungsi yang disediakan melalui prop dan mengemas kini keadaan ibu bapa.

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa anda struktur komponen mungkin perlu dinilai semula. Komponen 5 dan 3 dalam contoh anda nampaknya tidak mempunyai hubungan langsung.

Satu penyelesaian yang berpotensi ialah memperkenalkan komponen peringkat lebih tinggi yang merangkumi kedua-dua komponen 5 dan 3. Komponen induk ini boleh mengekalkan keadaan yang berkaitan dengan kedua-dua komponen kanak-kanak dan turunkannya melalui prop.

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Keadaan Komponen Induk daripada Komponen Anak dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!