Warum ist 'das' nicht definiert, wenn ich die jsx-Datei (react.js) mit babel-preset-es2015 und Webpack gebündelt habe?

Question

Zuerst löste ich vorübergehend das Problem, dass 'dieses' undefiniert wird durch Deaktivieren von 'babel-preset-es2015' und Entfernen von 'es2015' styled Codes wie 'import', '() => {}' usw. Ich frage mich nur, aus welchem ​​Grund dieses Problem auftritt, also stelle ich die Frage hier.

Mein Projekt verwendet React.js, Webpack, Babel und Electron, um eine Desktop-Anwendung zu erstellen. Ich habe UI mit React.js erstellt, meine Jsx-Datei mit Babel und Webpack gebündelt.

Das ist meine jsx Datei:

const React = require('react') 
const ReactDOM = require('react-dom') 

let Evet = React.createClass({ 
    handleClick: function() { 
    this.props.onUserSelect(this.props.anEvet) 
    }, 
    render: function() { 
    return (
     <div className='well well-sm' onClick={this.handleClick}> 
     {this.props.anEvet.type}: {this.props.anEvet.kind} 
     </div> 
    ) 
    } 
}) 

let EvetInfo = React.createClass({ 
    render: function() { 
    let apisList = [] 
    this.props.anEvet.apis.forEach((api) => { 
     apisList.push(<li>{api}</li>) 
    }) 
    return (
     <div className='well well-lg'> 
     <h2>{this.props.anEvet.type} ({this.props.anEvet.kind})</h2> 
     <ul>{apisList}</ul> 
     </div> 
    ) 
    } 
}) 

let EvetList = React.createClass({ 
    getInitialState: function() { 
    return { 
     selectedEvet: {} 
    } 
    }, 
    handleSelectEvet: function (anEvet) { 
    this.setState({ selectedEvet: anEvet }) 
    }, 
    render: function() { 
    let list = [] 
    this.props.evetsList.forEach((evet, idx) => { 
     list.push(<Evet key={evet._id} anEvet={evet} onUserSelect={this.handleSelectEvet} />) 
    }) 
    let info 
    if (this.state.selectedEvet.kind) info = <EvetInfo anEvet={this.state.selectedEvet} /> 
    return (
     <div> 
     <div className='col-md-4'>{list}</div> 
     <div className='col-md-8'>{info}</div> 
     </div> 
    ) 
    } 
}) 

ReactDOM.render(
    <EvetList evetsList={evets} />, 
    document.getElementById('evetlist') 
) 

Das ist meine webpack.config.js Datei.

Wenn ich mein Programm ausführen, habe ich einen Fehler wie der folgende Screenshot.

Wenn ich 'es2015 styled code' entferne und 'babel-preset-es2015' in der Datei 'webpack.config.js' deaktiviere, funktioniert es absichtlich. Könnten Sie mich wissen lassen, warum dieser Fehler auftritt, wenn ich die Voreinstellung 'es2015' verwende, um sie zu bündeln? Ich möchte 'es2015' Stil verwenden, um mein Programm zu machen. '() =>' Notation ist so cool und bequem. :)

Answer 1

Sie können Fett-Pfeil-Funktionen nicht verwenden, nur weil sie "cool und bequem" sind - sie haben andere Semantik als normale Funktionen. Insbesondere teilen sie sich eine lexikalische this mit ihrem enthaltenden Geltungsbereich, anstatt eine neue this - und in einer React-Komponente, die in einem Modul sein wird, the outer this will be undefined.