반응 클래스 방법이 정의되지 않았습니다. no-undef

Question

나는 반응이 새로운 것입니다. 내 응용 프로그램이 제대로 실행되었지만 eslint (airbnb)를 추가 한 후 내 응용 프로그램을 컴파일하지 못했습니다.

export default class HelloWorldComponent extends React.Component { 
    render() { 
    return (
     <div> 
     <div>{this.props.message}</div> 
     <button onClick={this.props.helloWorldClick}>Hello 
     World</button> 
     </div> 
    ) 
    } 
    helloWorldClick =() => { 
    console.log('here') 
    } 
} 

{ "파서": "바벨 - eslint을"} 추가하기 전에 .eslintrc 파일에, 그것은 파서를 추가 한 후 eslint 오류

"[eslint] Parsing error: Unexpected token =" --on the helloWorldClick arrow function line.

을 던지고, 내가 어떤 elsint 오류가 없습니다 . 하지만 컴파일 된 오류가있어 앱을 실행합니다.

Failed to compile ./src/component/HelloWorldComponent.js Line 18: 'helloWorldClick' is not defined no-undef

이 오류를 어떻게 해결할 수 있는지 알려주십시오.

Answer 1

여기에서 문제를 일으키는 것은 화살표 기능이 아닙니다. 클래스 속성은 ES6 사양의 일부가 아닙니다. 이 코드를 변환하려면 class properties babel plugin을 추가해야합니다.

또는이 변형은 Babel의 stage 2 preset의 일부로 제공됩니다.

클래스 속성과 함께 arrow 함수를 사용하면이 값을 구성 요소와 함께 항상 호출하므로 메서드 리 바인드가 중복됩니다.

this.helloWorldClick = this.helloWorldClick.bind (this); 

Answer 2

답장을 보내 주셔서 감사합니다. 그러나 내 문제는 달랐다. 마침내 나는 이것을 해결했다. eslint 버전을 3.19.0으로 다운 그레이드합니다. 이제 완벽하게 작동합니다.