React 모듈을 ES6 클래스로 변환 할 때`this '를 해결하는 방법

Question

ES5에서 잘 작동하는 React 모듈이 있습니다. 나는 그것을 ES6으로 변환하고 변환을 위해 6to5을 사용하고있다. 모든 것은 잘 처리되지만, props을 설정할 때 런타임 오류가 발생합니다. debugger을 삭제하고 this을 보면 this은 EventEmitter이며 클래스가 아닙니다. 여기 내 코드는 다음과 같습니다.

var React = require('react'); 

import CalendarStore from './../stores/calendar.store.js'; 

function getAppointments() { 
    return {appts: CalendarStore.getAppts()} 
} 

export default class extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.props = { 
     view: 'weeks' 
    } 
    } 

    changeView(child, view) { 
    this.setProps({view: view}); 
    } 

    componentWillMount() { 
    CalendarStore.addChangeListener(this._onChange); 
    } 

    _onChange() { 
    this.setProps(getAppointments()); 
    } 

    .... 
}; 

내 changeView 기능에있는 곳입니다. 그것은 다음과 같습니다 transpiled 아래 인 경우 :

_onChange: { 
     value: function _onChange() { 
     this.setProps(getAppointments()); 
     }, 
     writable: true, 
     configurable: true 
    } 

다시는, 그 함수 내에서, this 내 EventEmitter입니다. 이 문제를 해결하는 방법은 무엇입니까?

Answer 1

this.setProps은 사용하지 말고 상태를 사용하십시오. 이 경고는 0.13으로 표시됩니다 :

경고 : 일반 JavaScript 클래스에서 setProps (...)가 사용되지 않습니다.

또한 es6 클래스 메소드는 자동 바인딩되지 않으므로 수동으로 바인드해야합니다. .bind(this)을 사용하거나 화살표 기능을 사용할 수 있습니다. 외부 이미 터의 경우 참조를 유지해야합니다.

당신은 _onChange 제거 할 수 있습니다

this._calendarListener = e => this.setState({things: e}); 
CalendarStore.addChangeListener(this._calendarListener); 

또는 생성자에 바인드 :

constructor(props){ 
    ... 
    this._onClick = this._onClick.bind(this); 
} 

componentWillUnmount의 이벤트 바인딩을 해제하는 것을 잊지 마십시오

componentWillUnmount(){ 
    CalendarStore.removeChangeListener(this._onClick); 
    // or 
    CalendarStore.removeChangeListener(this._calendarListener); 
} 

을 이벤트 리스너를 추가하려면 componentWillMount가 아닌 componentDidMount에서 수행해야합니다. 생성자는 es6 클래스에서 componentWillMount를 대체합니다.

this.props = { 
    view: 'weeks' 
} 

그냥 코드에서 '국가'와 '소품'의 모든 항목을 대체하고, 모두가 좋은 것 :

이 코드

아주 나쁜 ... 당신은 소품 세트를 반응 오버 라이딩한다. 또한 상점의 초기 상태를 원할 수도 있습니다. 또한

this.state = { 
    view: 'weeks', 
    things: CalendarStore.getAppts() 
} 

---

는 createClass 곧 멀리 언제가는, 그래서 계속 사용 부담하지 않습니다. 종종 더 간단합니다. 상점은 일반적으로 createClass와는 별반 차이가없는 mixins에 의해 처리되어야하지만 es6 클래스에서는 올바르게 수행하기가 어렵습니다. 나는 mixins with react and es6 classes에 대한 작은 도서관이있다.