React 컴포넌트 함수 내에서 'this'가 정의되지 않은 이유는 무엇입니까?

React: "this"는 컴포넌트 함수 내에서 정의되지 않았습니다.

React에서 컴포넌트로 작업할 때 "this는 다음과 같습니다"라는 오류가 발생할 수 있습니다. 정의되지 않음"은 구성 요소에 정의된 함수 내에 있습니다. 공식 문서에 따르면 이는 구성 요소 인스턴스를 참조해야 하기 때문에 혼란스러울 수 있습니다. 그렇다면 이 오류는 왜 발생하는 걸까요?

문제는 React가 클래스 구성 요소를 초기화하는 방식에 있습니다. 이전 스타일의 ES5 클래스와 달리 ES6 React 구성 요소는 클래스 메서드를 인스턴스에 자동으로 바인딩하지 않습니다. 즉, 이벤트 핸들러와 같은 구성 요소 내부에 정의된 함수가 있는 경우 해당 함수 내의 this는 구성 요소를 참조하지 않습니다.

이 문제를 해결하려면 메서드를 구성 요소에 수동으로 바인딩해야 합니다. 생성자의 인스턴스. 예제에서 수행하는 방법은 다음과 같습니다.

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

onToggleLoop 메서드를 생성자의 구성 요소에 바인딩하면 이벤트 핸들러에서 메서드가 호출될 때 이 메서드가 구성 요소를 참조하도록 할 수 있습니다. 이를 통해 메서드 내에서 구성 요소의 상태와 소품에 액세스할 수 있습니다.

"정의되지 않았습니다." 오류를 방지하려면 생성자의 구성 요소 인스턴스에 액세스해야 하는 모든 클래스 메서드를 바인딩해야 합니다.

위 내용은 React 컴포넌트 함수 내에서 'this'가 정의되지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!