不能在反应组件类内使用箭头函数 [英] Cannot use Arrow functions inside react component class

问题描述

我已经启动了一个项目，我在后端使用React JS作为前端节点js。我使用webpack捆绑JS文件。我用了babel和其他必要的东西。当我在反应类中使用箭头函数时，会给出语法错误。像模块构建失败：SyntaxError：Unexpected token 。但是我可以在节点中使用箭头函数，没有任何问题。

这是我的webpack配置文件

 从路径导入路径; 
从'webpack'导入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'）]，
输出：{
 path：'/'，
 publicPath：'/'
}，
 plugins：[
 new webpack.NoErrorsPlugin（），
 new webpack.optimize.OccurenceOrderPlugin（），
 new webpack。 HotModuleReplacementPlugin（）
 
]，
 module：{
 loaders：[
 {
 test：/\.js$/，
包括：path.join（__ dirname，'client'），
 loaders：['react-hot-loader / webpack'，'babel'] 
}，
 {
 test ：/\.jpe?g$|\gif$|\.svg$|\\\.png$/i，
 loader：'file-loader？name = [name]。[ext] '
} 
] 
}，
解决方案：{
 extension：[''，'。js'] 
} 
} 
  

我的React文件

  class mapSidebar extends React.Component {
 
构造函数（道具，上下文）{
 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& / div> 
< div> 
< AutoComplete 
 hintText =输入任何东西
 dataSource = {this.state.dataSource} 
 onUpdateInput = {this。 handleUpdateInput} 
 /> 
< / Paper> 
< / div> 
）; 
} 
 
} 
 
导出默认的mapSidebar; 
  

如何解决这个问题？

解决方案

这里不是造成问题的箭头功能。 类属性不属于ES6规范。

  handleUpdateInput =（value）=> {
 // ... 
}; 
  

如果您想要转换此代码，则需要添加类属性babel插件。

或者，此变换是作为Babel的第二阶段预设的一部分提供的。 / p>

使用带有一个类属性的箭头函数确保该方法始终被调用，该组件的值为 ，这意味着这里的手动重新绑定是多余的。

  this.handleUpdateInput = this.handleUpdateInput.bind（this）; 
  

I've started a project where i use React JS for the front end an node js in backend. I used webpack for bundling up JS files. i used babel along with other necessary stuff. When ever i use arrow functions inside a react class it gives a syntax error. like Module build failed: SyntaxError: Unexpected token. But i can use Arrow function in node without any issue.

this is my webpack config file

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']
  }
}

My React file

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;

How to resolve this issue?

解决方案

It's not the arrow function that's causing a problem here. Class properties are not part of the ES6 specification.

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

If you want to be able to transform this code, you'll need to add the class properties babel plugin.

Alternatively, this transform is provided as part of Babel's stage 2 preset.

Using an arrow function with a class property ensures that the method is always invoked with the component as the value for this, meaning that the manual rebinding here is redundant.

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

这篇关于不能在反应组件类内使用箭头函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！