用 = 和 => 符号反应覆盖函数问题

Question

我正在尝试覆盖另一个 react 存储库，但在这样做时遇到了问题。

问题 1) 我想覆盖他们的方法

selectItem = (item, clickType, e) => {
...
}

但是，项目无法使用我试图覆盖的上述语法编译代码。

问题2）上面和使用有什么区别：

selectItem(item, clickType, e){
...
}

如果 selectItem(item, clickType, e) 覆盖而不使用“=”和“=> 表示法，我也应该很高兴，但它看起来不像我的代码正在使用（如果我在覆盖构造函数中设置了一个“调试器”，那么我已经知道我正在实例化正确的类）。

我的印象是，无论哪种方式都可以覆盖该函数。

我认为问题 #1 涉及 webpack.config 问题。我正在使用：

loaders: [
    {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['es2015', 'react']
        }
    },
    { test: /\.css$/, loader: 'style-loader!css-loader' },
]

我正在查看的回购协议正在使用：

loaders: [
  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
  },
  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
  },
  {
    test: /\.(js|jsx)$/,
    loaders: ['babel'],
    exclude: /node_modules/
  }
]

他们正在使用 ExtractTextPlugin，但应该没关系，因为它不适用于 .js/.jsx，对吧？

我不太了解问题 #2，不知道从哪里开始。

Answer 1

这是一个箭头函数语法，是 ES6 扩展的一部分，

安装以下

npm intall -S babel-preset-state-0 babel-plugin-transform-decorators-legacy babel-plugin-react-html-attrs

然后像配置你的 webpack 一样

loaders: [
    {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['es2015', 'react', 'stage-0'],
            plugins: ['react-html-attrs', 'transform-decorators-legacy']
        }
    },
    { test: /\.css$/, loader: 'style-loader!css-loader' },
]

transform-decorators-legacy 插件将为您提供对箭头功能的支持。

您的其他存储库可能有一个.babelrc 文件与webpack-config 一起使用。

Answer 2

我将只回答符号问题，因为 Shubham 已经解决了 babel 问题。

两者的区别

function foo(bar) {
  console.log(bar)
}

和

const foo = (bar) => console.log(bar)

这是您第一次定义命名函数 foo。第二个你定义了一个 foo var，它有一个函数作为它的值。你也可以这样做：

var foo = function(bar) { console.log(bar) }

箭头函数语法()=>{} 和function(){} 的主要区别在于箭头函数不会将 this 绑定到自己的作用域。

如需进一步阅读，请访问MDN Arrow Function