ES6 React 元件中箭頭函數可以永久綁定類別方法嗎？

在 ES6 中使用箭頭函數作為類別方法

在使用 ES6 類別開發 React 應用程式時，將方法綁定到目前物件是過去的常見做法。但是，箭頭函數可以用於將類別函數永久綁定到實例，特別是對於回調函數嗎？

嘗試箭頭函數語法

以前，人們會使用以下語法綁定方法：

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

嘗試使用箭頭函數來取代：

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

結果錯誤。

正確語法

使用箭頭函數作為類別方法的語法略有不同。屬性名稱後面需要一個等號：

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

啟用實驗性功能

此功能是實驗性的，需要transform-class-properties Babel 外掛程式來編譯：

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

透過安裝插件npm:

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

用法

啟用實驗性功能後，傳遞 SomeClass.handleInputChange 作為回呼函數將作用於類別實例，而不是視窗物件。

有關更多信息，請參閱類別欄位和靜態屬性的提案。

以上是ES6 React 元件中箭頭函數可以永久綁定類別方法嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！