ES6 화살표 함수가 React에서 클래스 메서드를 영구적으로 바인딩할 수 있나요?

ES6 클래스의 화살표 함수를 클래스 메서드로 활용하는 방법

처음 ES6 클래스를 React에 통합할 때 인스턴스를 바인딩하는 것이 일반적이었습니다. 명시적으로 메서드를 사용합니다(아래 예에 설명된 대로). 그러나 중요한 질문이 생깁니다. ES6에서는 화살표 함수를 사용하여 클래스 함수를 클래스 인스턴스에 영구적으로 바인딩하여 콜백으로의 사용을 단순화하는 것이 가능합니까?

class SomeClass extends React.Component {
  // Bound method
  constructor() {
    this.handleInputChange = this.handleInputChange.bind(this);
  }
}

CoffeeScript는 이 기능을 제공하지만, 여부는 불분명합니다. ES6에서도 비슷한 것을 얻을 수 있습니다.

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

이 질문은 화살표 함수가 ES6 내의 클래스 인스턴스에 영구적으로 바인딩되어 다음을 수행할 수 있는지 이해하려고 합니다. 콜백 함수로 쉽게 활용하여 setTimeout과 같은 함수에 전달될 때 올바른 컨텍스트를 보장합니다.

해결책: 구문 수정

다음을 사용하여 클래스 메서드를 정의하려는 원래 시도 화살표 함수에 사소한 구문 오류가 있습니다. 올바른 구문은 다음과 같습니다.

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

이 구문을 사용하려면 성공적인 컴파일을 위해 Babel 내에서 실험적 기능을 활성화해야 한다는 점에 유의하는 것이 중요합니다. 필요한 플러그인(transform-class-properties)을 설치하면 이러한 실험적 기능을 활성화할 수 있습니다.

또한 공식 제안 문서에서 클래스 필드 및 정적 속성에 대한 포괄적인 토론을 찾을 수 있습니다.

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