使用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中描述的屬性初始化器語法。）