Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Mengemas kini Keadaan Komponen Induk daripada Komponen Anak dalam React?

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

Patricia Arquette
Lepaskan: 2024-12-03 16:36:13
asal
634 orang telah melayarinya

How Can I Update a Parent Component's State from a Child Component in 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} / >
  }
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan