当我使用babel-preset-es2015和Webpack捆绑jsx文件（react.js）时，为什么'this'未定义？

Question

首先，我通过禁用“babel-preset-es2015”并删除“es2015”样式代码（例如'import'）来暂时解决'this'不断变为的问题。 ）=＆gt; {}'等我只是想知道这个问题发生的根本原因，所以我把问题放在这里。

我的项目使用React.js，Webpack，Babel和Electron来制作桌面应用程序。我使用React.js构建了UI，使用Babel和Webpack捆绑了我的jsx文件。

这是我的jsx文件：

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')
)

这是我的webpack.config.js文件。

const path = require('path')

module.exports = {
  entry: [
    './app/components/app.js'
  ],
  output: {
    path: path.join(__dirname, 'app/js/dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
}

当我运行程序时，出现了如下截图所示的错误。

当我删除'es2015样式代码'并禁用'webpack.config.js'文件中的'babel-preset-es2015'时，它可以正常工作。当我使用'es2015'预设捆绑它时，你能告诉我为什么会发生这个错误吗？我想用'es2015'风格制作我的节目。 '（）=＆gt; '符号太酷了，很方便。 ：）

Answer 1

你不能仅仅因为它们“酷而方便”而使用胖箭头功能 - 它们具有与普通功能不同的语义。具体来说，他们共享一个词汇this及其包含范围，而不是创建一个新的this - 并且在一个React组件中，它将位于模块the outer this will be undefined中。