Bolehkah Arrow Functions Mengikat Kaedah Kelas Secara Kekal dalam Komponen ES6 React?

Menggunakan Fungsi Anak Panah sebagai Kaedah Kelas dengan ES6

Dalam membangunkan aplikasi React dengan kelas ES6, kaedah mengikat objek semasa adalah amalan biasa pada masa lalu. Walau bagaimanapun, bolehkah fungsi anak panah digunakan untuk mengikat fungsi kelas secara kekal pada contoh, terutamanya untuk fungsi panggil balik?

Mencuba Sintaks Fungsi Anak Panah

Sebelum ini, seseorang akan mengikat kaedah menggunakan sintaks seperti:

class SomeClass extends React.Component {
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }
}

Percubaan untuk menggunakan fungsi anak panah sebaliknya:

class SomeClass extends React.Component {
  handleInputChange (val) => {
    console.log('selectionMade: ', val);
  }
}

menghasilkan ralat.

Sintaks Betul

Sintaks untuk menggunakan fungsi anak panah sebagai kaedah kelas sedikit berbeza. Tanda sama dengan diperlukan selepas nama sifat:

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

Mendayakan Ciri Percubaan

Ciri ini adalah percubaan dan memerlukan pemalam Babel sifat-kelas transformasi untuk menyusun:

{
  "plugins": [
    "transform-class-properties"
  ]
}

Pasang pemalam melalui npm:

npm install --save-dev babel-plugin-transform-class-properties

Penggunaan

Dengan ciri percubaan didayakan, menghantar SomeClass.handleInputChange sebagai fungsi panggil balik akan diskop kepada contoh kelas, bukan objek tetingkap.

Untuk mendapatkan maklumat lanjut, rujuk cadangan untuk Medan Kelas dan Sifat Statik.

Atas ialah kandungan terperinci Bolehkah Arrow Functions Mengikat Kaedah Kelas Secara Kekal dalam Komponen ES6 React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!