當我使用babel-preset-es2015和Webpack捆綁jsx文件（react.js）時，為什么“ this”未定義？

Question

首先，我暫時解決了以下問題：禁用“ babel-preset-es2015”並刪除諸如“ import”，“（（）=> {}”等）的“ es2015”樣式代碼，從而使“ this”變得不確定 。我只是想知道發生此問題的根本原因，所以我將問題放在這里。

我的項目使用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”樣式制作程序。 '（）=>'標記非常酷且方便。 :)

Answer 1

您不能僅僅因為胖箭頭函數“既酷又方便”而使用它們，它們具有與普通函數不同的語義。 具體來說，它們與其包含的作用域共享一個詞法this ，而不是創建新的this —在將位於模塊中的React組件中， 外部this將是undefined 。