无法在 React 组件类中使用箭头函数 [重复]

Posted 2023-02-22

【中文标题】无法在 React 组件类中使用箭头函数 [重复]

【英文标题】：Unable to use Arrow functions inside React component class [duplicate]

【发布时间】：2017-05-14 21:31:37

【问题描述】：

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

模块构建失败：SyntaxError: Unexpected token

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

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

我的反应文件：

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;

如何解决这个问题？

【问题讨论】：

您确定您的构建通过 Babel 运行代码吗？

你能举个例子说明你是如何在 reactJS 中使用箭头函数的吗？

@Pointy 如何检查它是否通过 babel 运行？

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

如果你使用箭头函数，那么你就不需要在构造函数this.handleUpdateInput = this.handleUpdateInput.bind (this);中这样做了

【参考方案1】：

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

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

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

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

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

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

【讨论】：

感谢我使用了 babel 插件，它工作正常。并感谢您提供更多信息。

【参考方案2】：

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

代码应该是这样的：

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

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

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

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

【讨论】：

是的，你是对的，我在 react 类之外使用它并且它有效。但我看到了一些人们在反应类中使用它的例子

@TRomesh 但我确实看到在课堂上使用箭头功能没有任何进展。也许这个插件可以帮助 - babeljs.io/docs/plugins/transform-class-properties。但是这样做有什么意义呢？

@MaciejSikora 它会在方法内自动将组件绑定为this，这样您就无需在构造函数中重新绑定或定义函数（失去与原型共享方法的能力）。

@DanPrince 是的，我明白你的意思。