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

Cara Menyebarkan Kemas Kini Negeri daripada Anak kepada Ibu Bapa dalam React Tanpa Redux

Model aliran data satu arah React sering memberikan cabaran dalam mengemas kini komponen induk' negeri daripada keturunan mereka. Mari kita pertimbangkan senario di mana struktur komponen berikut wujud:

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

Matlamatnya ialah untuk Komponen 3 memaparkan data berdasarkan keadaan Komponen 5. Memandangkan prop tidak boleh diubah, menghantar keadaan daripada Komponen 5 kepada Komponen 1 tidak boleh dilaksanakan.

Sebaliknya, React menyediakan penyelesaian melalui komunikasi ibu bapa anak menggunakan fungsi panggil balik. Coretan kod berikut menunjukkan cara ini boleh dicapai:

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, induk menghantar fungsi panggil balik, pengendali(), kepada komponen anak melalui prop. Fungsi ini, apabila digunakan oleh kanak-kanak, mencetuskan kemas kini keadaan dalam komponen induk, membenarkan perubahan keadaan menyebarkan pepohon komponen.

Walaupun pendekatan ini menangani cabaran segera, ia mungkin memerlukan pemikiran semula struktur komponen . Dalam senario yang diberikan, Komponen 5 dan 3 nampaknya tidak mempunyai hubungan langsung. Untuk mengurangkan isu ini, pertimbangkan untuk membungkusnya dalam komponen peringkat lebih tinggi yang mengurus keadaan untuk kedua-dua komponen dan menyebarkannya melalui prop. Ini membolehkan penyelesaian yang lebih modular dan boleh diselenggara.

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