javascript - 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 -属性).

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