Bagaimana untuk Menghantar Props daripada Komponen Kanak-Kanak kepada Komponen Induk dalam React.js?

Menyalurkan Props kepada Komponen Induk dalam React.js

Apabila bekerja dengan hubungan ibu bapa-anak dalam React.js, ia mungkin tidak serta-merta jelas bagaimana untuk menghantar prop komponen kanak-kanak kepada induknya. Walau bagaimanapun, terdapat pendekatan mudah yang mengelak bergantung pada peristiwa atau konfigurasi yang kompleks.

Mengenal pasti Masalah

Isu timbul apabila cuba menyerahkan prop kanak-kanak secara terus kepada propsnya. ibu bapa menggunakan acara seperti onClick. Percubaan untuk mengakses prop kanak-kanak melalui acara menimbulkan persoalan mengapa pendekatan sedemikian diperlukan, memandangkan ibu bapa sudah memiliki prop tersebut.

Pendekatan Lebih Mudah

Penyelesaian yang lebih diperkemas melibatkan penggunaan fakta bahawa ibu bapa sudah mempunyai akses kepada prop anak mereka dan menggunakannya secara langsung:

// Child component
render() {
  return <button onClick={this.props.onClick}>{this.props.text}</button>;
}

// Parent component (with single child)
render() {
  return <Child onClick={this.handleChildClick} text={this.state.childText} />;
}

// Parent component (with list of children)
render() {
  const children = this.state.childrenData.map(childData => {
    return <Child onClick={this.handleChildClick.bind(null, childData)} text={childData.childText} />;
  });

  return <div>{children}</div>;
}

Mengelakkan Gandingan Terlalu

Penyelesaian yang melibatkan pemindahan keseluruhan komponen anak kepada ibu bapa melalui pengendali onClick adalah tidak digalakkan, kerana ia memperkenalkan gandingan yang tidak perlu dan kompromi enkapsulasi. Sebaliknya, adalah lebih baik untuk mengehadkan interaksi antara komponen kepada antara muka masing-masing.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Props daripada Komponen Kanak-Kanak kepada Komponen Induk dalam React.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!