React程序在jscomplete.com/repl上运行正常，但是当我在浏览器中运行时，相同的代码会给我以下错误

Question

React程序在jscomplete.com/repl上运行正常，但是当我在浏览器中运行，在编辑器中编写代码并使用babel时，相同的代码会出现以下错误。

babel-browser.min.js:41 Uncaught SyntaxError: http://localhost/react1/app.jsx: Unexpected token (2:14)
  1 | class Button extends React.Component{
> 2 |   handleClick = () => {
    |               ^
  3 |     this.props.onClickFunction(this.props.incrementValue);
  4 |   }
  5 |   render() {

Answer 1

该代码中的handleClick函数被定义为一个类实例字段，该字段尚未成为JS的一部分（目前处于第2阶段）

要使其工作，您必须使用一个包含它的插件配置Babel（例如，babel-preset-stage-2或直接babel-plugin-transform-class-properties）。

或者，在类中使用普通函数定义，并将其绑定到组件构造函数内的this。