无法修复“模块构建失败：SyntaxError:: Unexpected token”错误

Question

据我所知，我有正确的 .babelrc 和 webpack.config 设置，但模块构建仍然失败：npm start 上的 SyntaxError。

    ERROR in ./src/components/Nav.js
    Module build failed: SyntaxError: /Users/me/project/src/components/Nav.js: Unexpected token (24:69)
      22 |             <LoadingButton className="btn--nav" />
      23 |           ) : (
    > 24 |             <a href="#" className="btn btn--login btn--nav" onClick={::this._logout}>Logout</a>
         |                                                                      ^
      25 |           )}
      26 |         </div>
      27 |       ) : (

我的.babelrc 文件看起来像：

{
  "presets": ["react", "es2015", "stage-1"],
  "env": {
    "development": {
      "presets": [
        "react-hmre"
      ]
    },
    "production": {
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-remove-prop-types"
      ]
    }
  }
}

和webpack.config 文件（缩写）：

module: {
            loaders: [
              {test: /\.js$/, loader: 'babel', exclude: path.join(__dirname, '/node_modules/'), include: path.join(__dirname, 'src')},
              {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
              {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
              {test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
              {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
              {test: /\.(jpe?g|png|gif)$/i, loaders: ['file']},
              {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
              {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}
            ]
          }

谁能在这里指出我的错误？

Answer 1

绑定运算符 :: 不包含在 ES6（也称为 ECMA2015）中，它只是一个提议的语言特性。您正在为 ECMA2015 (es2015) 使用 babel 预设，因此它不会将 :: 识别为有效的运算符。您只需使用良好的 .bind 函数或箭头函数来捕获“this”上下文即可轻松解决此问题。

所以，不要写onClick={::this._logout}

你可以写：

1)onClick={ this._logout.bind(this) }

2)onClick={ () => { this._logout() } }