Bagaimanakah Saya Boleh Mengemas kini Keadaan Komponen Induk daripada Komponen Anak dalam React?

Pengurusan Negeri Anak-Ibu Bapa dalam React

Dalam React, mengekalkan keadaan dalam hierarki komponen boleh mencabar, terutamanya apabila keadaan komponen induk perlu dikemas kini daripada kanak-kanak. Contoh yang disediakan menunjukkan struktur komponen induk-anak di mana Komponen 3 perlu memaparkan data berdasarkan keadaan Komponen 5.

Walaupun prop lazimnya tidak berubah, ini tidak bermakna mustahil untuk mengemas kini keadaan ibu bapa daripada kanak-kanak. Begini cara anda boleh mencapainya:

Lepaskan fungsi tetapan keadaan sebagai prop daripada ibu bapa kepada anak. Ini membolehkan kanak-kanak mengemas kini keadaan ibu bapa apabila dipanggil.

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 contoh ini, kanak-kanak mempunyai akses kepada fungsi pengendali daripada ibu bapa. Apabila butang dalam kanak-kanak diklik, pengendali dipanggil, mengemas kini keadaan ibu bapa.

Walau bagaimanapun, adalah penting untuk mempertimbangkan struktur komponen. Dalam kes anda, Komponen 5 dan 3 tidak berkaitan secara langsung. Untuk menangani perkara ini, anda boleh memperkenalkan komponen peringkat lebih tinggi yang merangkum keadaan untuk kedua-dua Komponen 1 dan 3. Komponen perantaraan ini kemudiannya akan menyediakan prop yang diperlukan kepada komponen peringkat bawah.

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