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

Question

首先，我通过禁用'babel-preset-es2015'并删除'es2015'这样的样式代码，暂时解决了'this'不断变为undefined的问题如'import'、'() => {}'等。我只是想知道发生此问题的根本原因，所以我把问题放在这里。

我的项目使用 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 styled code' 并禁用 'webpack.config.js' 文件中的 'babel-preset-es2015' 时，它会正常工作。你能告诉我为什么当我使用 'es2015' 预设来捆绑它时会发生这个错误吗？我想使用 'es2015' 风格来制作我的程序。 '() => ' 符号非常酷和方便。 :)

Answer 1

您不能仅仅因为粗箭头函数 "cool and convenient"-- 它们的语义与普通函数不同就使用它们。具体来说，它们与其包含范围共享词法 this，而不是创建新的 this-- 并且在将位于模块中的 React 组件中，the outer this will be undefined.

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

Why is 'this' undefined when I bundled the jsx file (react.js) using babel-preset-es2015 and Webpack?

javascript

reactjs

webpack

babeljs

electron