无法在 React 组件内使用箭头函数 class

Question

我开始了一个项目，我在前端使用 React JS，在后端使用 node js。我使用 webpack 来打包 JS 文件。我使用了 babel 和其他必要的东西。当我在 react class 中使用箭头函数时，它会出现语法错误，例如：

Module build failed: SyntaxError: Unexpected token

但是我可以毫无问题地在节点中使用 Arrow 函数。

这是我的 webpack 配置文件：

import path from 'path';
import webpack from 'webpack';
import 'react-hot-loader/patch';

export default{
  devtool: 'eval',
  entry:[
    'react-hot-loader/patch',
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname,'client/index.js')],
  output:{
    path:'/',
    publicPath:'/'
  },
  plugins:[
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()

  ],
  module:{
    loaders:[
      {
        test:/\.js$/,
        include:path.join(__dirname,'client'),
        loaders: ['react-hot-loader/webpack', 'babel']
      },
      {
        test: /\.jpe?g$|\.gif$|\.svg$|\.png$/i,
        loader: 'file-loader?name=[name].[ext]'
      }
    ]
  },
  resolve:{
    extension:['','.js']
  }
}

我的 React 文件：

class mapSidebar extends React.Component{

    constructor(props,context){
       super(props,context);
       this.state = {
         dataSource: []
       };
         this.handleUpdateInput = this.handleUpdateInput.bind (this);
    }

    handleUpdateInput = (value) => {
      this.setState({
        dataSource: [
          value,
          value + value,
          value + value + value,
        ],
      });
    };

    render(){
      return(
        <div>
          <Paper zDepth={2}>
            <div>Hello</div>
            <div>
                <AutoComplete
                  hintText="Type anything"
                  dataSource={this.state.dataSource}
                  onUpdateInput={this.handleUpdateInput}
                />
          </Paper>
        </div>
      );
    }

}

export default mapSidebar;

如何解决这个问题？

Answer 1

这不是箭头函数的问题，而是在 class 声明中使用它，此代码将在构造函数体或任何其他函数体中工作，但在 class 声明中不起作用。

代码应该看起来像这样：

handleUpdateInput(value){
  this.setState({
    dataSource: [
      value,
      value + value,
      value + value + value,
    ],
  });
};

可以在任何 class 方法中使用箭头函数，但不能在 class 声明中使用。例如在构造函数中使用箭头函数：

constructor(props,context){
   super(props,context);

   this.someFunc = ()=>{
     //here function code
   };
}

Answer 2

这里的问题不是箭头函数。 Class properties 不是 ES6 规范的一部分。

handleUpdateInput = (value) => {
  // ...
};

如果您希望能够转换此代码，则需要添加 class properties babel plugin。

或者，此转换作为 Babel stage 2 preset 的一部分提供。

使用带有 class 属性的箭头函数可确保始终使用组件作为 this 的值来调用该方法，这意味着此处的手动重新绑定是多余的。

this.handleUpdateInput = this.handleUpdateInput.bind (this);

无法在 React 组件内使用箭头函数 class

Unable to use Arrow functions inside React component class

javascript

ecmascript-6

reactjs

babeljs

ecmascript-next