Javascript “如何修复”；模块生成失败：SyntaxError:意外令牌“；使用React和Web包时出错？

我正在使用Webpack和React为一家网店构建一个简单的购物车。由于某些原因，我在将add to cart函数添加到.js文件时出现此错误：

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

它指向我的js代码中的

var productID

My 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>
    );
  }
}

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

导出默认类Cart extends组件{
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>
    );
  }
}

render（）{
返回(
$（“#addit”）。单击（函数（）{}）；
);
}
}

这不是React的工作原理。虽然React的JSX看起来像HTML是真的，但它不是一回事；相反，它（由Babel）转换为JavaScript指令，以创建呈现给该HTML的React元素

试图将jQuery JavaScript放入JSX是行不通的。（而且它没有多大用途——为什么要让您的JavaScript创建创建JavaScript的React元素，而不仅仅是编写JavaScript？）

作为一个起点，尝试类似这样的方法，将必要的逻辑放入React中：

导出默认类购物车扩展组件{
handleAdd=e=>{
//查找productId、productName、productQuantity
//为此使用React REF，或者（更好）使用这些组件
//通过onChange或类似工具将其值存储在
//组件可以看到它。
//
//发布AJAX——在这里使用jQuery是可以的，但是jQuery是一个大问题
//只是对AJAX的依赖。
//
//等等。
};
render（）{
返回(
添加到购物车
);
}
}

（此

handleAdd

使用属性初始值设定项语法。）

导出默认类Cart extends组件{
render（）{
返回(
$（“#addit”）。单击（函数（）{}）；
);
}
}

这不是React的工作原理。虽然React的JSX看起来像HTML是真的，但它不是一回事；相反，它（由Babel）转换为JavaScript指令，以创建呈现给该HTML的React元素

试图将jQuery JavaScript放入JSX是行不通的。（而且它没有多大用途——为什么要让您的JavaScript创建创建JavaScript的React元素，而不仅仅是编写JavaScript？）

作为一个起点，尝试类似这样的方法，将必要的逻辑放入React中：

导出默认类购物车扩展组件{
handleAdd=e=>{
//查找productId、productName、productQuantity
//为此使用React REF，或者（更好）使用这些组件
//通过onChange或类似工具将其值存储在
//组件可以看到它。
//
//发布AJAX——在这里使用jQuery是可以的，但是jQuery是一个大问题
//只是对AJAX的依赖。
//
//等等。
};
render（）{
返回(
添加到购物车
);
}
}

---

（此

handleAdd

使用属性初始值设定项语法。）

@JoshKelley抱歉，输入错误。已修复。您没有从组件返回有效的jsx。请参阅以了解有效的jsx。一切都是错误的：p这不是有效的jsx！甚至无效的回应。我将像这样保留此代码，以便任何犯下与我相同错误的人都可以通过@JoshKelley的答案找到正确的答案。@JoshKelley抱歉，输入错误。已修复。您没有从组件返回有效的jsx。请参阅以了解有效的jsx。一切都是错误的：p这不是有效的jsx！甚至无效。我将像这样保留此代码，这样任何犯下与我相同错误的人都可以通过@JoshKelley的答案找到正确的方法。我使用了您的示例，但在运行Webpack时仍然会遇到相同的错误。现在它指向

>5中的等号| handleAdd=e=>{

。@feners-你看到我链接到的关于属性初始值设定项语法的文档了吗？它还没有标准化，所以你需要一个额外的Babel插件来让它工作。感谢你指出我的错误并详细说明如何解决它们。我用你的示例得到了它。我使用了你的示例，但在运行Webpack时仍然会遇到同样的错误。现在它指向了

>5 | handleAdd=e=>{

。@fenes-你看到我链接到的关于属性初始值设定项语法的文档了吗？它还没有标准化，所以你需要一个额外的巴别塔插件来让它工作。感谢你指出我的错误并详细说明如何解决它们。我用你的例子得到了它。

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>
    );
  }
}

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>
    );
  }
}