无法在React组件类中使用箭头函数

Question

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

Module build failed: SyntaxError: Unexpected token

但是我可以在node中使用箭头函数而没有任何问题。

这是我的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;

如何解决这个问题？

- TRomesh

---

你确定你的构建过程会通过Babel运行代码吗？ - Pointy

你能举个在ReactJS中使用箭头函数的例子吗？ - JSNinja

@Pointy 如何检查它是否通过Babel运行？ - TRomesh

@JSNinja 我已经编辑了我的问题。 - TRomesh

如果您正在使用箭头函数，则不需要在构造函数内执行此操作 this.handleUpdateInput = this.handleUpdateInput.bind (this);。 - HussienK

Answer 1

箭头函数并不是造成问题的原因。类属性不是 ES6 规范的一部分。

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

如果你想要能够转换这段代码，你需要添加类属性Babel插件。

另外，这个转换也作为Babel的第二阶段预设的一部分提供。

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

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

- Dan Prince

---

谢谢，我使用了 Babel 插件，它运行良好。还有感谢您提供的额外信息。 - TRomesh

Answer 2

这不是箭头函数的问题，而是在类声明内使用它的问题。这段代码可以在构造函数体或任何其他函数体中起作用，但不能在类声明中使用。

代码应该像这样：

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

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

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

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

- Maciej Sikora

---

是的，你说得对，我在 React 类之外使用它时它有效。但是我看到一些例子，人们在 React 类内部使用它。 - TRomesh

@TRomesh，但我在这里没有看到使用箭头函数的进展，真的。也许这个插件可以帮助 - https://babeljs.io/docs/plugins/transform-class-properties/。但是这样做有什么意义呢？ - Maciej Sikora

它会自动将组件绑定为方法中的“this”，从而避免您需要在构造函数中重新绑定或定义函数（失去了与原型共享方法的能力）。 - Dan Prince

@DanPrince 是的，我明白您的意思。 - Maciej Sikora