使用React和Webpack时如何解决“模块构建失败：SyntaxError：意外令牌”错误？

Question

我正在使用Webpack和React为网上商店构建一个简单的购物车。 由于某种原因，当我将添加到购物车功能添加到我的.js文件时，出现此错误：

ERROR in ./js/views/Cart.js
Module build failed: SyntaxError: Unexpected token

它指向我的js代码中的var productID 。

我的Cart.js看起来像：

import React, { Component } from 'react';

export default class Cart extends Component {
  render() {
    return (
      <div className='Cart' id='Cart'>
        <iframe src="./logo.pdf" width="425" height="425"></iframe>
        $("#addit").click(function(){
            var productId = $("#productId").val();
            var productName = $("#productName").val();
            var productQuantity = $("#productQuantity").val();
            var data = {
              'product_id': productId,
              'product_name': productName,
              'quantity': productQuantity
            }; 

            $.post("/cart/add", data, showDone);
          });

          var showDone = function() {
            /* Make something happen here*/
          }
      </div>
    );
  }
}

我的Webpack配置是：

const path = require('path');

module.exports = {
  context: __dirname + "/app",

  entry: {
    javascript: "./js/app.js",
    html: "./index.html",
  },

  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },

  resolve: {
    extensions: ['', '.js', '.jsx', '.json'],
    root: path.resolve(__dirname, './app/js'),
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        loaders: ["react-hot", "babel-loader"],
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      }
    ],
  },
}

导致此错误的代码有什么问题？

Answer 1

export default class Cart extends Component {
  render() {
    return (
      <div className='Cart' id='Cart'>
        <iframe src="./logo.pdf" width="425" height="425"></iframe>
        $("#addit").click(function(){});
      </div>
    );
  }
}

这不是React的工作方式。 确实，React的JSX看起来像 HTML，但这不是一回事。 取而代之的是，它被Babel转换为JavaScript指令，以创建可渲染为该HTML的React元素。

试图将jQuery JavaScript放入您的JSX中是行不通的。 （它没有太大的目的-为什么告诉您的JavaScript创建可创建JavaScript的React元素，而不仅仅是编写JavaScript？）

首先，尝试类似这样的方法，将必要的逻辑放入React中：

export default class Cart extends Component {
  handleAdd = e => {
    // Look up productId, productName, productQuantity
    // Use React refs for this, or (better) have those components
    // store their values via onChange or similar someplace where this
    // component can see it.
    //
    // Issue AJAX - it's okay to use jQuery here, but jQuery's a big
    // dependency just for AJAX.
    //
    // etc.
  };

  render() {
    return (
      <div className='Cart' id='Cart'>
        <iframe src="./logo.pdf" width="425" height="425"></iframe>
        <button onClick={this.handleAdd} id="addit">Add to cart</button>
      </div>
    );
  }
}

（此handleAdd使用React docs中描述的属性初始化器语法。）