प्रतिक्रिया मॉड्यूल को ईएस 6 कक्षा

Question

में कनवर्ट करने में `this` को कैसे हल करें मेरे पास मॉड्यूल है जो ES5 में ठीक काम करता है। मैं इसे ES6 में परिवर्तित कर रहा हूं और रूपांतरण के लिए 6to5 का उपयोग कर रहा हूं। सब कुछ ठीक से पारदर्शी है, लेकिन जब मैं अपना props सेट करने का प्रयास कर रहा हूं तो मुझे रनटाइम त्रुटि मिलती है। जब मैं debugger छोड़ता हूं और this पर देखता हूं, तो मुझे लगता है कि thisEventEmitter है और कक्षा नहीं है।

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:

चेतावनी: 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); 
} 

ईवेंट श्रोताओं को जोड़ना घटकडिडमाउंट में किया जाना चाहिए, घटक नहीं WillMount। कन्स्ट्रक्टर ईएस 6 कक्षाओं में घटक WillMount की जगह लेता है।

इस कोड को बहुत खराब है ... आप अधिभावी रहे रंगमंच की सामग्री सेट प्रतिक्रिया:

this.props = { 
    view: 'weeks' 
} 

बस अपने कोड में 'राज्य' के साथ 'सहारा' की सभी घटनाओं की जगह है, और सभी अच्छा होगा। इसके अलावा आप शायद स्टोर की प्रारंभिक स्थिति चाहते हैं।

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

---

इसके अलावा, createClass नहीं दूर किसी भी समय जल्दी ही चला, तो यह इस्तेमाल करते रहने के लिए स्वतंत्र महसूस कर रहा है। यह अक्सर आसान है। स्टोर को आम तौर पर मिक्स्कीन्स द्वारा नियंत्रित किया जाना चाहिए, जो createClass के साथ तुच्छ है, लेकिन es6 कक्षाओं में सही करना मुश्किल है। मेरे पास mixins with react and es6 classes के लिए एक छोटी पुस्तकालय है।