Bagaimanakah Saya Boleh Mengemas kini Keadaan Komponen Induk daripada Komponen Anak Bersarang dalam React tanpa Menggunakan Redux?

Mengemas kini Keadaan Ibu Bapa dalam React tanpa Redux

Ramai pembangun menghadapi cabaran untuk berkomunikasi antara komponen bersarang. Senario biasa timbul apabila komponen anak perlu mengemas kini keadaan komponen induk peringkat lebih tinggi. Ini menjadi bermasalah kerana React menentukan bahawa prop tidak boleh diubah.

Pertimbangkan struktur komponen berikut:

Component 1
  - Component 2
    - Component 4
      - Component 5
Component 3

Dalam senario ini, Komponen 3 memerlukan akses kepada keadaan yang disimpan dalam Komponen 5. Nampaknya intuitif untuk meneruskan keadaan Komponen 5 sebagai prop kepada Komponen 1 dan memajukannya ke komponen lain. Walau bagaimanapun, peraturan kebolehubahan React melarang pendekatan ini.

Satu penyelesaian kepada masalah ini ialah melaksanakan komunikasi anak-ibu bapa menggunakan fungsi yang disediakan oleh komponen induk. Pertimbangkan coretan kod berikut:

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, fungsi pengendali yang disediakan oleh komponen Induk dihantar kepada komponen Anak sebagai prop. Apabila butang dalam komponen Kanak-kanak diklik, ia menggunakan fungsi pengendali, mengemas kini keadaan komponen Induk.

Adalah penting untuk ambil perhatian bahawa penyelesaian ini memerlukan penstrukturan semula hierarki komponen untuk memastikan perhubungan logik antara komponen. Dalam contoh yang diberikan, Komponen 5 dan Komponen 3 mungkin tidak berkaitan secara langsung. Oleh itu, mungkin perlu mencipta komponen baharu yang merangkumi mereka, membolehkan negeri diuruskan dengan berkesan.

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