Arrow 함수가 ES6 React 구성 요소의 클래스 메서드를 영구적으로 바인딩할 수 있습니까?

ES6에서 Arrow 함수를 클래스 메서드로 사용

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);
  }
}

실험적 기능 활성화

이 기능은 실험적이며 컴파일하려면 변환 클래스 속성 Babel 플러그인이 필요합니다.

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

다음을 통해 플러그인을 설치하세요. npm:

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

사용법

실험적 기능이 활성화된 상태에서 SomeClass.handleInputChange를 콜백 함수로 전달하면 창 개체가 아닌 클래스 인스턴스로 범위가 지정됩니다.

자세한 내용은 클래스 필드 및 정적 속성에 대한 제안을 참조하세요.

위 내용은 Arrow 함수가 ES6 React 구성 요소의 클래스 메서드를 영구적으로 바인딩할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!